CSS triangle background

Question

I want to have a triangle shaped background in my project.

I've already tried some things and the top arrow / triangle works (see example https://i.stack.imgur.com/ZKgWP.jpg).

But I think it looks better if I could do the same on the bottom.

This is the code that worked for the top:

.secondSection {
    padding-top: 75px;
    background-image: linear-gradient(-4deg, #ff7a7d 300px, transparent 0),
    linear-gradient(4deg, #ff7a7d 300px, transparent 0);
    text-align: center;
    min-height: 300px;
}

I can't find the right information on the internet on how to create a simple cut in the div... I rather don't use a svg. Can someone advise me where to look?

add your html code here – Sarabjit Singh Nov 01 '19 at 11:01 — Sarabjit Singh, Nov 01 '19 at 11:01
Why use an svg tag if you don't want a svg solution? – Robert Longson Nov 01 '19 at 11:02 — Robert Longson, Nov 01 '19 at 11:02

Ori Drori · Accepted Answer · 2019-11-01T16:02:08.470

0

To convert the top triangles to bottom triangles, add 180 deg to the current angles:

.secondSection {
  background-image: 
    linear-gradient(176deg, #ff7a7d 75%, transparent 75%),
    linear-gradient(184deg, #ff7a7d 75%, transparent 75%);
  text-align: center;
  height: 100vh;
}

body {
  margin: 0;
}

<div class="secondSection"></div>

If you want both top and bottom triangle, you can start with a transparent color, and end with a transparent color.

.secondSection {
  background:
  linear-gradient(-4deg, transparent 25%, #ff7a7d 25%, #ff7a7d 75%, transparent 75%),
  linear-gradient(4deg, transparent 25%, #ff7a7d 25%, #ff7a7d 75%, transparent 75%);
  height: 100vh;
}

body {
  margin: 0;
}

<div class="secondSection"></div>

edited Nov 01 '19 at 16:02

answered Nov 01 '19 at 11:07

Ori Drori

183,571
29
224
209

Thanks it works, but is it possible to have both? (So it looks like you have to scroll down) – Coen Couwenberg Nov 01 '19 at 13:23
See updated answer – Ori Drori Nov 01 '19 at 16:02

CSS triangle background

1 Answers1