Как сделать фигуру в ксс

Question

как сделать такую фигуру http://htmlbook.ru/files/images/blog/matrix_1d.png. Буду благодарен

Answer 1

Смотри здесь все подробно описано клац

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
    transform: rotate(90deg);
}

Надеюсь помог

Answer 2

Надо указать переспективу для родителя

body {
  perspective: 600px;
}

.item {
  width: 200px;
  height: 100px;
  background: red;
  transform: rotateY(60deg);
}

<div class="item"></div>

Answer 3

Пример с использованием clip-path

.block {
  width: 150px;
  height: 100px;
  background-color: #000;
  position: relative;
  transition: background-color .3s ease;
}

.block::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: #ccc;
}

.block,
.block::after {
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
}

.block:hover {
  background-color: #00f;
}

<div class="block"></div>

БЛОГ НА HUSL

Как сделать фигуру в ксс

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