Авторизация
Забыли пароль? Введите ваш е-мейл адрес. Вы получите письмо на почту со ссылкой для восстановления пароля.
После регистрации вы сможете задавать вопросы и писать свои ответы, получая за это бонусы. Все остальные функции на сайте доступны без регистрации.
Вы должны войти или зарегистрироваться, чтобы добавить ответ и получить бонусы.
Есть несколько способов создания треугольника в CSS. Вот некоторые из них:
1. С использованием границ и нулевых размеров:
«`css
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
«`
2. С использованием псевдоэлемента `::before`:
«`css
.triangle {
position: relative;
width: 0;
height: 0;
}
.triangle::before {
content: «»;
position: absolute;
top: 0;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
«`
3. С использованием трансформаций:
«`css
.triangle {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
«`
4. С использованием SVG:
«`css
.triangle {
width: 100px;
height: 100px;
background-image: url(«data:image/svg+xml,%3Csvg viewBox=’0 0 100 100’%3E%3Cpolygon points=’50 0 100 100 0 100′ fill=’red’/%3E%3C/svg%3E»);
}
«`
Выберите подходящий способ в зависимости от ваших потребностей и предпочтений.