Can I make a triangle in CSS?

Question

Can I make a triangle in CSS?

You need to draw a triangle in CSS. The methods described in the articles use border, they are visually like a triangle, but you can't put elements inside.

You can make a triangle but so that you can put elements inside?

Here is an example of how the result should be:

3

css css3 вёрстка div clip-path

Author: Valeriu Vodnicear, 2018-06-25

Source

1 answers

score 1 · Answer 1

As Arthur wrote in the comment, you can use clip-path, but the location of the elements will need to be adjusted manually

.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