trying to make divs with a triangle shape with bootstrap and scss - html

Question

image1
I am trying to make 3 divs in bootstrap like in this image.Now, I have the code but the problem is, that the before/after elements do not scale with its own div and text.I need to make them responsive, so in small screens, they go one under another.Here is a link withthe bootstrap and scss code: http://www.bootply.com/qYUhoNymFI

Answer 1

The scss code is not applied in your link, so I added classic CSS at the end to show you the way to follow to create triangle.
Here is the code I added :
.shipping,
.support {
position: relative;
background: #d7b789;
color: white;
text-align: center;
}
.returns {
position: relative;
background: black;
color: white;
text-align: center;
}
.shipping:before,
.returns:before,
.returns:after,
.support:after {
content: "";
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 32px transparent;
width: 32px;
height: 32px;
}
.returns:before {
left: 0px;
border-left-color: white;
}
.returns:after {
right: 0px;
border-right-color: white;
}
.shipping:before {
right: -64px;
border-left-color: #d7b789;
z-index: 1;
}
.support:after {
left: -64px;
border-right-color: #d7b789;
z-index: 1;
}
Bootply
What I have done here is to set the background colors to match the example.
Then I set the a width, height (equal to the half of the parent div's height) and border to the before and after we want, and set their border-color to transparent.
On each 'before and after, you then define a border-color on the side you want to have the triangle to start.
You then have to place the left and right on the rights elements to place them where you want.
Notice the z-index I added on the first and last block so you are sure the triangles come over the middle block
Now you could translate this to scss to optimize the code.
For example make a mixin for the multiple transform prefixes so you don't have to repeat them everywhere.
Add a variable for the div's height (64px in the example), and use it also for the border-width ($height / 2), and replace the left: -64px; and right: -64px; using this variable too.