用css写一个平行四边形
时间: 2024-06-10 22:09:50 浏览: 143
CSS 实现平行四边形的示例代码
可以使用transform属性中的skewX()函数来实现平行四边形效果。
HTML代码:
```
<div class="parallelogram">平行四边形</div>
```
CSS代码:
```
.parallelogram {
width: 200px;
height: 100px;
background-color: #ccc;
transform: skewX(-20deg);
}
```
解释:设置div元素的宽度和高度,背景颜色为灰色,transform属性中的skewX()函数将元素向右倾斜20度,从而实现平行四边形效果。可以根据需要调整倾斜度数和元素的宽度和高度。
阅读全文