CSS Two columns layout + gradient separation - css

Question

I am trying to show a gradient vertical separation between two columns, and a bottom horizontal gradient separation between the divs.
The following code (scss) doesn't show the bottom border:
.col-container {
.column-box {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to right, white, #efedf4, white) 1 stretch;
min-height: 200px;
}
& > div:nth-child(odd) {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to bottom, white, #efedf4) 0 90%;
}}
While the following code only shows the bottom border:
.col-container {
.column-box {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to right, white, #efedf4, white) 1 stretch;
min-height: 200px;
}}
Here is the code, as you will see the left div losses its bottom border:
https://jsfiddle.net/0nsvzqxg/
Any idea how to show only the vertical separator in between the 2 divs and the bottom border on all of them?
Thanks

Answer 1

You have 2 things to solve.
draw the border on two sides but from the same gradient
select the right boxes via the nth-child() selector
Since the width of the border image is quiet small, the gradient can be drawn like a diagonal. from a top corner to the opposite bottom corner and repeated once . It could be linear-gradient(to bottom left, white, #efedf4, white, #efedf4, white).
while you need to draw one or 2 borders, you need to update the slice values for each borders. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
When four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise)
div {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to bottom left, red, blue, red, blue, red)1 / 2px 2px 2px 2px stretch;
/* what would be gradient image */
background: linear-gradient(to bottom/* or top */ left/* or right*/ , blue, red, blue, red, blue);
box-shadow: inset 0 0 0 2px white;/* break border from background */
/* demo purpose */
height: 50vh;
width: 50vw;
padding: 1em;
color: white;
}
html,
div {
display: flex;
align-items: center;
justify-content: center;
}
p {
margin: 1em;
padding: 1em;
}
html {
min-height: 100vh;
}
/* end demo */
<div>
<p>To figure out the gradient image needed for the border, you may draw it in the background to tune it</p>
<p> from horizontal / vertical to diagonal, it needs to be repeated at least once.</p>
</div>
Note: shorthand values : border-image:/* source | slice | width | outset | repeat */
About the nth-child() selector, you can use a counter CSS to see better where each child stands .
.col-container {
counter-reset: box
}
.column-box:nth-child(odd) {
color: tomato
}
.column-box::before {
counter-increment: box;
content: 'child N°:'counter(box)' ';
color: green
}
<div class="col-container">
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
Once put together, it can be :
.col-container {
overflow: auto;
}
.col-container > * {
float: left;
width: 50%;
box-sizing: border-box;
}
.col-container .column-box {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to bottom left, white, #efedf4, white, #efedf4, white)
2/ 0 0 2px 0 stretch;
min-height: 30vh;
}
.col-container > div:nth-child(odd) {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to bottom left, white, #efedf4, white, #efedf4, white)
2/0 2px 2px 0;
}
<div class="col-container">
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
</div>
Note: flex + flex-wrap would be a better option than float, each boxes of each rows will be the same height.