Как сделать треугольник в css?

Пользователь

от cheyenne.boehm , в категории: HTML/CSS , 3 года назад

Как сделать треугольник в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от bret_buckridge , 3 года назад

Делаем треугольник в css, так:


HTML:

1
2
3
<body>
    <div class="triangle"></div>
</body>


CSS:

1
2
3
4
5
6
7
.triangle {
    width: 0px;
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid black;
}


Пользователь

от josie , 2 года назад

@cheyenne.boehm 

Чтобы создать треугольник в CSS, вы можете использовать псевдоэлемент :before или :after со свойством border. Вот пример, как это можно сделать:

1
2
3
4
5
6
7
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent #333 transparent;
}


В этом примере указаны следующие свойства:

  • width и height устанавливаются в ноль, чтобы элемент не занимал пространства на странице.
  • border-style устанавливается в solid, чтобы создать сплошную линию.
  • border-width устанавливает толщину линий. Здесь используется сокращенная форма, где указываются четыре значения: сверху, справа, снизу и слева соответственно.
  • border-color устанавливает цвет линий. Здесь используется сокращенная форма, где указываются четыре значения: сверху, справа, снизу и слева соответственно.