How to make triangle section separator [closed]
Tags: html,css,integration
Problem :
I have to do the integration of a mockup. But I am wondering if there is a way to do it only in CSS.
We have a (diagonal) triangle section separator, and I don't know how to make them in CSS (except with image or svg). And if this is even possible?
My separator looks like this: . (It's a huge rectangle triangle at the top of the section).
I'm speaking of the part at the top of the blue line here:
.
Do you know if it's possible to do it with CSS rules? And if so, how can I do this?
Solution :
Something like this should do. Using vw
(viewport-width) to span the entire container.
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 100vw;
border-color: transparent transparent #007bff transparent;
}
<div class="triangle"></div>
You can attach this to a :before
pseudo-selector on your container.
You will have to do some work for cross-browser compatibility however. See the caniuse on this for more information and updates on supported browsers.