![7275569-b5ac7a05b775881e.png](https://i-blog.csdnimg.cn/blog_migrate/0534064d08d9c2f5dea83f51f41f6506.png)
微信订阅号:Rabbit_svip
利用伪元素( ::before 和 ::after )制作,这样可以不影响主元素,也不用依赖其他html元素。
利用border的特性制作角标。
border属性还有很多玩法:
本节效果
![7275569-c4c4662a3a8645fe.png](https://i-blog.csdnimg.cn/blog_migrate/4eb6c20cc3ab94358ba30f19929527ac.png)
微信订阅号:Rabbit_svip
<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(透明)
。