写一个梯形盒子,上面窄下面宽,底下两个角,是反圆角
时间: 2023-09-26 08:06:46 浏览: 113
盒子
好的,下面是使用CSS3的方式绘制一个上底边长为100,下底边长为200,高为80,底下两个角是反圆角的梯形盒子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>梯形盒子绘制</title>
<style>
.trapezoid {
width: 200px;
height: 80px;
background-color: #f9c2ff;
transform: perspective(40px) rotateX(20deg);
transform-origin: top;
border-radius: 0px 0px 10px 10px / 0px 10px 10px 0px;
}
</style>
</head>
<body>
<div class="trapezoid"></div>
</body>
</html>
```
运行上述代码,即可在浏览器中看到绘制的梯形盒子。
阅读全文