怎么用css实现带圆角，色值可以是不透明的对勾？

• Z时代
• 2024-01-10
• 分类：技术分享

像上面的这个图片

思路1：border + rotate

对勾用矩形的两个边实现，但是圆角做不到

思路2: 两个div + rotate

使用两个div重合，然后旋转。但是这里存在重叠部分，对于backgroudColor为不透明的情况，重叠部分颜色会叠加

求大佬指点！

回答

对勾使用两个一边圆角一边直角的矩形和一个正方形拼接不就行了

使用伪元素，一个元素就可以制作，这也是常用的解决方式，下面是基础代码，加上悬浮，激活时的样式和动画效果，就是完整版的

<span class="wm-radio"></span>
.wm-radio{
    position: relative;
}
.wm-radio::before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 2px solid #409eff;
    box-sizing: border-box;
}
.wm-radio::after{
    content: "";
    box-sizing: border-box;
    display: inline-block;
    width: 6px;
    height: 10px;
    border: 2px solid #409eff;
    border-top: 0;
    border-left: 0;
    position: absolute;
    left: 7px;
    top: 6px;
    transform: translateY(-50%) rotate(45deg);
}

以上是 怎么用css实现带圆角，色值可以是不透明的对勾？ 的全部内容， 来源链接： utcz.com/a/31050.html