4

Нужно нарисовать треугольник на CSS. Способы которые описаны в статьях используют border, визуально они как треугольник, но внутри нельзя поместить элементы.

Можно сделать треугольник но чтобы внутри можно было поместить элементы?

Приведу пример как должен быть результат:

введите сюда описание изображения

10
  • 1
    SVG или clip-path
    – Arthur
    Commented 25 июн. 2018 в 14:11
  • @МаксимЛенский Да Commented 25 июн. 2018 в 14:30
  • @Arthur а можно сделать как-то чтобы текст начался где начинается треугольник? Commented 25 июн. 2018 в 14:36
  • Может быть Вы @МаксимЛенский знаете? Commented 25 июн. 2018 в 14:38
  • Вот пример codepen.io/vodnicear/pen/KeBeMg Commented 25 июн. 2018 в 14:38

2 ответа 2

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

1
  • проблема в том что картинка заходит под край треугольника, position: absolute в данном случае не могу использовать Commented 25 июн. 2018 в 14:44
1

почему бы и нет? всё что нужно поддерживается всеми и достаточно давно.

desctop / mobile FF O ms explorer(edge) iOSx explorer(safari) droid explorer(chrome)
shape-outside 62 24 79 10.1 / 10.3 37
shape-image-threshold 62 24 79 10.1 / 10.3 (без %) 37
shape-margin 62 24 79 10.1 / 10.3 37
clip-path 3.5 / 4 42 79 9.1 / 9.3 55

#x{
  background: green;
  border: 3px solid lime;
  shape-image-threshold: 1;
}

#L, #R{
  display: block;
  border: 3px solid red;
  background: pink;
  height: 100vh;
  width: 49%;
  shape-margin: 20px;
}

#R{
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  shape-outside: polygon(100% 0, 100% 100%, 0 0);
  float: right;
}
#L{
  clip-path: polygon(0 0, 100% 0, 0 100%);
  shape-outside: polygon(0 0, 100% 0, 0 100%);
  float: left;
}
img{
  background: skyblue;
  border: 3px solid blue;
  height: 4em;
  width: 4em;
}
img:nth-child(3n-1){
  height: 2em;
  width: 2em;
}
img:nth-child(3n-2){
  height: 3em;
  width: 3em;
}
<div id='L'></div>
<div id='R'></div>
<div id='x'>
<img><img><img><img><img><img><img><img><img><img>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci,
  libero quae nihil porro debitis laboriosam inventore animi impedit nostrum
  nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta
  repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo
  eligendi, architecto ratione quibusdam iusto nisi soluta?
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.