css伪元素实现选中卡片的角标
warning:
这篇文章距离上次修改已过439天，其中的内容可能已经有所变动。
CSS伪元素可以用来实现选中卡片的角标，以下是一个简单的示例，使用伪元素:before来在卡片的左上角添加一个角标：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card with Corner Badge</title>
<style>
.card {
width: 200px;
height: 100px;
background-color: #f0f0f0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background-color: #333;
clip-path: polygon(0 0, 100% 0, 0 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
</style>
</head>
<body>
<div class="card">Card Content</div>
</body>
</html>在这个例子中，.card 类定义了一个卡片的基本样式，而 .card::before 伪元素创建了一个三角形形状的角标，使用 clip-path 属性将其剪裁成三角形。角标中可以放置序号或其他标记，可以通过调整伪元素的 width、height 和 background-color 属性来自定义角标的样式。
评论已关闭