How to make triangle section separator

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:

blue_line .

Do you know if it's possible to do it with CSS rules? And if so, how can I do this?

Possible duplicae - http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work — Paulie_D, Mar 26 '15 at 22:26
Thanks for the link. This and the zep_fan answer should do the trick :) — hornfl4kes, Mar 26 '15 at 22:33

zep_fan · Accepted Answer · 2015-03-26T22:41:09.603

5

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.

edited Mar 26 '15 at 22:41

answered Mar 26 '15 at 22:31

zep_fan

776
5
13

Thank you. This should do the trick easily. – hornfl4kes Mar 26 '15 at 22:38
I don't know if you saw my updated snippet; but I had the width set to 100% which was producing undesired results. Changing it to 0 is the correct solution. – zep_fan Mar 26 '15 at 22:43
Yes I saw this. In fact I read the [Paulie_D's link](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) and saw the width had to be to 0 :) – hornfl4kes Mar 26 '15 at 22:47

score 1 · Answer 2 · answered Mar 26 '15 at 22:36

1

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;
}

answered Mar 26 '15 at 22:36

Delto

321
2
14

A bit more complex. But interesting way to do the trick. – hornfl4kes Mar 26 '15 at 22:41
@hornfl4kes Please know that `vw` CSS (your accepted answer) does have some browser support issues. [See Here](http://caniuse.com/#feat=viewport-units) – Delto Mar 27 '15 at 21:53
Yes I know, but for this project I don't want to be fully compatible. But thank you so much for your trick too :) – hornfl4kes Mar 28 '15 at 20:55

score 0 · Answer 3 · answered Mar 26 '15 at 22:36

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;  
}

How to make triangle section separator

3 Answers3