简介
最近切页面切到一个类似于京东plus会员的页面。当时刚拿到页面的时候人都有些懵,毕竟我是一个前端小白,这种电商的页面还没有这么做过。
参考页面
![](https://img-blog.csdnimg.cn/a5f6376af5e04fc4b99e0d3b43229603.jpeg)
后来经过一段时间的学习发现css的伪类很强大。
下面是实现背景加三角形内含√的代码。
&.select {
border: 4rpx solid #FFB900;
position: relative;
background-color: #FFF4D5;
/* 三角形 */
&::after {
content: "";
position: absolute;
bottom: 0rpx;
right: 0rpx;
border-bottom: 50rpx solid #FFB900;
border-left: 50rpx solid transparent;
}
/* 三角形勾 */
&::before {
content: '';
position: absolute;
width: 16rpx;
height: 11rpx;
background: transparent;
bottom: 10rpx;
right: 6rpx;
border: 4rpx solid white;
border-top: none;
border-right: none;
transform: rotate(-55deg);
z-index: 9;
}
}
实现效果
![](https://img-blog.csdnimg.cn/7e955a48d1484e108c8f4ca2b43eaefa.jpeg)