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.sstatic.net/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?

Answer 1

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>