css编写标签样式
2020-11-09 本文已影响0人
Lia代码猪崽
切图很容易限制宽度，如果想要根据内容宽度来自适应，可以自己写css来实现。
好多个呢
我们可以将标签拆分为：
- 一个边框为圆角的矩形，距离左边有一定的外边距，自身有一定的内边距，不写死宽度。
- 一个三角形，在矩形的左边。
1. 边框为圆角的矩形的样式
.tag {
margin-left: 8px;
padding: 5px 10px;
position: relative;
height: 20px;
line-height: 20px;
color: #fff;
background-color: pink;
border-radius: 5px;
}
2. 三角形，在矩形的左边。
可以使用 伪类 ::before 实现。
三角形需要用到 border 的 transparent 属性。
.tag::before {
position: absolute;
left: -8px;
width: 0;
top: 10px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 8px solid pink;
width: 0;
height: 0;
content: '';
}
完整代码
<!DOCTYPE html>
<head>
<title>标签css</title>
<style>
body {
margin: 20px 0;
text-align: center;
}
div {
margin-bottom: 20px;
}
.tag {
margin-left: 8px;
padding: 5px 10px;
position: relative;
height: 20px;
line-height: 20px;
color: #fff;
background-color: pink;
border-radius: 5px;
}
.tag::before {
position: absolute;
left: -8px;
width: 0;
top: 10px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 8px solid pink;
width: 0;
height: 0;
content: '';
}
</style>
</head>
<body>
<div>
<span class="tag">123</span>
<span class="tag">1123</span>
<span class="tag">12233</span>
</div>
<div>
<span class="tag">11231323</span>
<span class="tag">12</span>
</div>
</body>
