css画四边形 一个角30度 一个150度 其他90
时间: 2023-08-19 09:53:36 浏览: 76
四边形的绘制
要使用CSS画一个具有一个30度角、一个150度角和其他两个90度角的四边形,您可以使用CSS的伪元素和transform属性来实现。以下是一个示例代码:
```css
.quadrilateral {
position: relative;
width: 200px;
height: 200px;
background-color: blue;
}
.quadrilateral::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
transform-origin: top left;
transform: skew(30deg);
}
.quadrilateral::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: red;
transform-origin: top left;
transform: skew(-30deg);
}
.quadrilateral span {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 100%;
background-color: red;
transform-origin: bottom left;
transform: skew(-60deg);
}
```
在上面的代码中,我们创建了一个具有200px宽度和200px高度的容器,并为其设置了蓝色背景。然后,我们使用`::before`和`::after`伪元素来创建两个具有30度角的三角形,以及使用一个span元素来创建一个具有150度角的三角形。
通过使用`transform: skew()`属性,我们将三个三角形进行了倾斜变形。`transform-origin`属性用于指定变形的原点位置。
您可以根据需要调整容器的尺寸、颜色和角度。请注意,这只是一个示例代码,您可能需要根据您的具体情况进行调整。
阅读全文