Как сделать треугольник в css?
2 ответа
от
bret_buckridge ,
2 года назад
Делаем треугольник в 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 ,
год назад
@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 устанавливает цвет линий. Здесь используется сокращенная форма, где указываются четыре значения: сверху, справа, снизу и слева соответственно.
15