Можно сделать треугольник в CSS?

214

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

Создание сайта для салона красоты в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Bootstrap плавающий div с прокруткой

Пытаюсь сделать так, чтобы на экране было две колонки - левая и праваяВ каждой колонке по таблице

206

CSS

При просмотре сайта через смартфон не загружается css

Недавно закончил с основным наполнением своего первого интернет-магазина и решил заняться оптимизациейПроблемы с блокирующими css удалось...

235

javascript

Неверно выполняется скрипт макроса

Веду семейный бюджет в Google SpreadsheetsПоявилась необходимость в значениях типа флажок

209

javascript

Отмена кнопки win

Разрабатываю биткоин кранТам пользователь сначала должен кликнут на рекламу потом получить за это сатоши

246