The images below are excerpts from my mockup. I'm trying to draw that sloping line that separates the two columns. In the first case it is right in the middle, in the second it is offset to the right.
The images and the code snippets below is what I currently achieved.
How can I achieve this?
/* Header Styles */
div.header-section-top-left {
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
background-color: #E6E6E6;
}
div.header-section-top-right {
border-left: 1px solid #f3f3f3;
border-right: 1px solid #f3f3f3;
border-top: 1px solid #f3f3f3;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
background-color: #f3f3f3;
}
div.header-section-bottom-left {
border-left: 1px solid #f3f3f3;
border-right: 1px solid #f3f3f3;
border-top: 1px solid #f3f3f3;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
background-color: #f3f3f3;
}
div.header-section-bottom-right {
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
background-color: #E6E6E6;
}
div.header-section-middle {
border-left: 1px solid #8aa1b3;
border-right: 1px solid #8aa1b3;
border-bottom: 1px solid #8aa1b3;
background-color: #e8f2fc;
}
div.header-section-bottom {
border-left: 1px solid #8aa1b3;
border-right: 1px solid #8aa1b3;
background-color: #d0e3f5;
padding: 3px 0px 3px 0px;
height: 100%
}
div.header-box-location {
padding-top: 8px;
padding-bottom: 4px;
margin-right: 8px;
background-color: #ffffff;
text-align: center;
}
div.header-margin-vertical {
padding-top: 8px;
padding-bottom: 4px;
}
div.header-margin-vertical-bottom {
padding-bottom: 4px;
}
div.header-cell {
margin-top: 4px;
}<div class="row">
<div class="col header-section-top-left">
<div class="row header-margin-vertical">
<div class="col header-font-title">
<span>...</span>
</div>
</div>
<div class="row">
<div class="col header-font-text text-truncate">
<span>...</span>
<span>...</span>,
<span>...</span>
<span>...</span>
</div>
</div>
<div class="row">
<div class="col header-cell header-font-text text-truncate">
<span>...</span>
<span>...</span>
</div>
</div>
</div>
<div class="col-6 header-section-top-right header-margin-vertical-bottom">
<div class="row header-margin-vertical">
<div class="col"></div>
<div class="col header-font-subtitle d-flex align-items-end">
<span>...</>
<span>...</span>
</div>
</div>
<div class="row">
<div class="col"></div>
<div class="col header-font-text text-truncate">
<span>...</span>
<span>...</span>,
<span>...</span>
<span>...</:span>
</div>
</div>
<div class="row">
<div class="col"></div>
<div class="col header-cell header-font-text text-truncate">
<span>...</span>
<span>...</span>
</div>
</div>
</div>
</div>