Как нарисовать трапецию в CSS?
2 ответа
от
abel ,
2 года назад
@kendall_mckenzie Для создание трапеции в CSS используйте следующий код:
HTML:
1 2 3 |
<body> <div id="trapezoid"></div> </body> |
CSS:
1 2 3 4 5 6 |
#trapezoid {
width: 300px;
border-bottom: 300px solid red;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
}
|
от
jorge ,
год назад
@kendall_mckenzie
Вы можете нарисовать трапецию в CSS, используя свойство transform для поворота элемента на угол, а также свойства width и height для определения размера трапеции.
Например, вот простой пример CSS для создания трапеции:
1 2 3 4 5 6 7 8 |
.trapezoid { width: 100px; height: 0; border-bottom: 50px solid red; border-left: 25px solid transparent; border-right: 25px solid transparent; transform: skewX(-30deg); } |
Этот код создаст трапецию с шириной 100 пикселей, высотой 50 пикселей и красным нижним бордюром. Левый и правый бордюры будут прозрачными, а с помощью свойства transform: skewX(-30deg) мы повернули элемент на 30 градусов, чтобы создать наклонные стороны.
Вы можете изменять значения свойств width, border-bottom, border-left и border-right для изменения размера и формы трапеции в соответствии с вашими потребностями.
15