как сделать такую фигуру http://htmlbook.ru/files/images/blog/matrix_1d.png. Буду благодарен
3 ответа
Надо указать переспективу для родителя
body {
perspective: 600px;
}
.item {
width: 200px;
height: 100px;
background: red;
transform: rotateY(60deg);
}
<div class="item"></div>
Смотри здесь все подробно описано клац
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
transform: rotate(90deg);
}
Надеюсь помог
-
Хорошо бы перенести из ссылки в ответ самое необходимое. Пока больше похоже на комментарий, чем на полноценный ответ.– A KCommented 16 мар. 2020 в 13:46
-
-
Дело в том, мне нужно, чтобы фигура в конце была сужена. Я вот думаю, такое вообще возможно сделать с помощью transform?– Asen123Commented 16 мар. 2020 в 13:57
Пример с использованием 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>