How to make triangle section separator [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
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?

Answer 1

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.

Answer 2

Here's a CSS3 method:
JSFIDDLE
HTML
<section class="diagonal">
CSS
body {
background: #333;
margin: 0px;
}
section {
position: relative;
margin-top:100px;
}
section:before {
position: absolute;
content:'';
}
.diagonal {
background: teal;
z-index: 1;
padding: 3em;
}
.diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
}

Answer 3

Use an absolutely positioned border offset off the top of your container:
https://jsfiddle.net/Levde3kj/1/
HTML:
<div class="container">
<div class="triangle"></div>
</div>
CSS:
.container {
float: left;
width: 400px;
height: 200px;
margin-top: 25px;
background-color: blue;
position: relative;
}
.container .triangle {
position: absolute;
top: -25px;
left: 0;
border-style: solid;
border-width: 0 0 25px 400px;
border-color: transparent transparent blue transparent;
}