CSS篇之圆角梯形
要创建一个圆角梯形，我们可以使用CSS的border-radius属性和一些伪元素来实现。以下是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS圆角梯形</title>
<style>
.trapezoid {
width: 200px;
height: 100px;
background-color: #4CAF50;
border-radius: 50px;
position: relative;
overflow: hidden;
}
.trapezoid::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: inherit;
z-index: -1;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="trapezoid"></div>
</body>
</html>在这个例子中，.trapezoid 是主要的元素，它设置了梯形的宽度、高度和背景颜色。border-radius 设置为 50px 创建了圆角。伪元素 .trapezoid::before 是梯形的阴影部分，它被定位在梯形的后面，并且设置了相同的 border-radius 以保持圆角。通过设置 overflow: hidden，我们隐藏了伪元素超出定义宽度的部分。这样我们就得到了一个圆角梯形。
评论已关闭