Можно сделать треугольник в CSS?
262
04 августа 2018, 19:10
Нужно нарисовать треугольник на CSS. Способы которые описаны в статьях используют border, визуально они как треугольник, но внутри нельзя поместить элементы.
Можно сделать треугольник но чтобы внутри можно было поместить элементы?
Приведу пример как должен быть результат:
Answer 1
как и писал Arthur в комментарии, можно использовать clip-path, но расположение элементов надо будет подгонять вручную
.a {
background-color: green;
width: 300px;
height: 300px;
clip-path: polygon(50% 00%, 100% 50%, 0% 50%, 0% 50%);
position: relative;
}
img {
position: absolute;
left: 40%;
top: 20%;
width: 100px;
object-fit: contain;
}<div class="a">
<img src="//www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
</div>https://codepen.io/MaxManchak/pen/pKZVpo
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 50308 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31942 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26286 visits
- Как через css изменить цвет png изображения? 11765 visits
- Blob video url download 11313 visits
- Php curl запрос через прокси с авторизацией 10721 visits
- Работа с captcha vk api 9517 visits
© "hostciti.net" 22.3.2026 | 03:23