写一个梯形盒子,底下两个角,是反圆角
时间: 2024-03-20 21:45:32 浏览: 17
好的,下面是使用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的方式绘制一个底边长为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>
```
运行上述代码,即可在浏览器中看到绘制的正梯形盒子。
写一个梯形盒子,底下是内凹圆角
好的,以下是一个梯形盒子的HTML和CSS代码,底下是内凹圆角:
```html
<div class="trapezoid"></div>
```
```css
.trapezoid {
width: 200px;
height: 0;
border-bottom: 100px solid #ccc;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
overflow: hidden;
position: relative;
}
.trapezoid::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
bottom: -100px;
left: -50px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
```
解释一下代码:
- 使用`border`属性实现梯形盒子,其中`border-bottom`表示底边的宽度和颜色,`border-left`和`border-right`表示左右两边斜边的宽度和颜色,`transparent`表示透明色。
- 使用`border-bottom-left-radius`和`border-bottom-right-radius`属性实现底部圆角。
- 使用`overflow: hidden`隐藏斜边超出盒子的部分。
- 使用伪元素`::before`实现底部内凹圆角,通过设置`bottom: -100px`将圆的底部定位到盒子的底部,并设置`box-shadow`属性实现内阴影效果。