Фон треугольника CSS

Я хочу, чтобы в моем проекте был фон в форме треугольника.

Я уже пробовал кое-что, и верхняя стрелка/треугольник работает (см. пример https://imgur.com/a/5pJ8Bd2).

Но я думаю, что было бы лучше, если бы я мог сделать то же самое на дне.

Это код, который работал для вершины:

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

Я не могу найти нужную информацию в Интернете о том, как создать простой разрез в div... Я предпочитаю не использовать svg. Может кто подскажет где искать?


svg html css arrows
person Coen Couwenberg    schedule 01.11.2019    source источник
comment
добавьте сюда свой html код   -  person Sarabjit Singh    schedule 01.11.2019
comment
Зачем использовать тег svg, если вам не нужно решение svg?   -  person Robert Longson    schedule 01.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы преобразовать верхние треугольники в нижние, добавьте 180 градусов к текущим углам:

.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>

Если вам нужны верхний и нижний треугольники, вы можете начать с прозрачного цвета и закончить прозрачным цветом.

.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>

person Ori Drori    schedule 01.11.2019
comment
Спасибо, это работает, но возможно ли иметь оба? (Похоже, вам нужно прокрутить вниз) - person Coen Couwenberg; 01.11.2019
comment
См. обновленный ответ - person Ori Drori; 01.11.2019