写一个正梯形盒子,底下两个角,是反圆角
时间: 2024-03-20 20:45:35 浏览: 54
好的,下面是使用CSS3的方式绘制一个底边长为200,上边长为100,高为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(-30deg);
transform-origin: bottom;
border-radius: 10px / 0px 0px 10px 10px;
}
</style>
</head>
<body>
<div class="trapezoid"></div>
</body>
</html>
```
运行上述代码,即可在浏览器中看到绘制的正梯形盒子。
相关问题
写一个梯形盒子,底下两个角,是反圆角
好的,下面是使用CSS3的方式绘制一个底边长为200,上边长为100,高为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: bottom;
border-radius: 10px / 0px 0px 10px 10px;
}
</style>
</head>
<body>
<div class="trapezoid"></div>
</body>
</html>
```
运行上述代码,即可在浏览器中看到绘制的梯形盒子。
写一个梯形盒子,上面窄下面宽,底下两个角,是反圆角
好的,下面是使用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>
```
运行上述代码,即可在浏览器中看到绘制的梯形盒子。
阅读全文