【CSS】角标(伪元素)
![【CSS】角标(伪元素)](https://static001.geekbang.org/infoq/d9/d9e5358c25be11c4d8ca5a3c19d0c021.jpeg)
利用伪元素( ::before 和 ::after )制作,这样可以不影响主元素,也不用依赖其他 html 元素。
利用 border 的特性制作角标。
border 属性还有很多玩法:
本节效果
![](https://static001.geekbang.org/infoq/83/8303a99e1d432ece773b5225c98ff1c5.webp?x-oss-process=image/resize,p_80/format,jpg)
复制代码
在 ::before
里,设置 border-right-color
为 transparent(透明)
。
利用伪元素( ::before 和 ::after )制作,这样可以不影响主元素,也不用依赖其他 html 元素。
利用 border 的特性制作角标。
border 属性还有很多玩法:
本节效果
<div class="corner"></div>
<style>
.corner {
position: relative;
width: 400px;
height: 300px;
border: 1px solid;
}
.corner::before {
position: absolute;
top: 0.3rem;
left: -0.5rem;
z-index: 1;
padding-right: 0.625rem;
font-weight: bold;
line-height: 0px;
color: #000;
height: 0px;
border: 0.9375rem solid #ee7600;
border-right-color: transparent;
content: "标签";
box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
}
.corner::after {
content: "";
position: absolute;
top: 2.1875rem;
left: -0.5rem;
border: 0.25rem solid #89540c;
border-left-color: transparent;
border-bottom-color: transparent;
}
</style>
在 ::before
里,设置 border-right-color
为 transparent(透明)
。
反派 2019.03.19 加入
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
促进软件开发及相关领域知识与创新的传播
评论