Как сверстать полигон

Question

Нужно сверстать полигон:

.item:nth-child(2):after {
    height: 0;
    width: 0;
    left: 242px;
    border-left: 370px solid transparent;
    border-bottom: 370px solid #212427;
    transform: translateY(-50%) rotate(-34deg);
}

Получил такое, но это не то что нужно:

Answer 1

Задолбаетесь бордерами делать.

div {
  background-color: #ccc;
  width: 350px;
  height: 350px;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  lefT: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  clip-path: polygon(317px 22px, 267px 338px, 18px 137px);
}

<div/>

Answer 2

Задолбаетесь бордерами делать.

¯\_(ツ)_/¯

body {margin: 0;}

.polygon {  
  display: inline-block;
  width: 345px;
  height: 349px;
  background-color: #999;
  position: relative;
}

.triangle {
  width: 0;
  height: 0;
  border: 160px solid transparent;
  border-top-width: 160px;
  border-bottom-color: #f00;
  border-bottom-width: 278px;
  border-top-width: 0;
  position: absolute;
  transform: rotate(39deg);
  left: 20.3%;
  top: -2.5%;
}

<img src="//i.stack.imgur.com/rpemx.png">
<div class="polygon">
  <div class="triangle"></div>
</div>

БЛОГ НА HUSL

Как сверстать полигон

Ответы (2 шт):