0

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

2
  • 1
    Покажите код ваших попыток 16 мар 2020 в 13:41
  • Офтоп: си-эс-эс. ))
    – Quazimorda
    17 мар 2020 в 13:15

3 ответа 3

1

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

body {
  perspective: 600px;
}

.item {
  width: 200px;
  height: 100px;
  background: red;
  transform: rotateY(60deg);
}
<div class="item"></div>

1

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

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


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

3
  • Хорошо бы перенести из ссылки в ответ самое необходимое. Пока больше похоже на комментарий, чем на полноценный ответ.
    – A K
    16 мар 2020 в 13:46
  • Вот так ? (Я просто только учусь :) )
    – Kazeev
    16 мар 2020 в 13:48
  • Дело в том, мне нужно, чтобы фигура в конце была сужена. Я вот думаю, такое вообще возможно сделать с помощью transform?
    – Asen123
    16 мар 2020 в 13:57
0

Пример с использованием 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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