css 对号 单选框选中的对号
<div class="check-style-unequal-width"></div>
.check-style-unequal-width {
width: 8px;
height: 16px;
border-color: #009933;
border-style: solid;
border-width: 0 3px 5px 0;
transform: rotate(45deg);
}
-
设置宽度和高度，得出一个矩形效果，并且矩形中没有内容
-
设置相邻 border 的样式，得到对号的大体轮廓
-
使用旋转属性，成功得到对号
-
注意事项
行级元素直接设置宽度和高度没有用，需要设置其 display 使其变为块级元素。例如：span 需要设置 display 为 inline-block 才能适用于本例效果
可以根据实际需求调整元素宽度和高度
可以根据实际需求设置不同的 border，以及相邻 border 的宽度
可以对此效果做简单的修改，作用于伪元素 ::before 和 ::after。可参考 ::before & ::after
原文链接：https://blog.csdn.net/u011848617/article/details/82824054
.triangle {
width: 0;
height: 0;
border-left: 22px solid transparent;
/* 左边透明边框 */
border-right: 0 solid;
/* 右边透明边框 */
border-bottom: 22px solid #000;
/* 底部黑色边框 */
}
<div class="triangle"></div>
单选框选中的对号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* 隐藏默认的单选按钮 */ input[type="radio"] { display: none; } /* 创建一个自定义的单选按钮样式 */ input[type="radio"]+label { position: relative; display: inline-block; padding: 10px 20px; margin: 0 10px 0 0; border: 2px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; } /* 当单选按钮被选中时，改变边框和字体颜色 */ input[type="radio"]:checked+label { border-color: red; color: red; } input[type="radio"]:checked+label::after { content: ''; position: absolute; width: 0; height: 0; border-left: 22px solid transparent; /* 左边透明边框 */ border-right: 0 solid; /* 右边透明边框 */ border-bottom: 22px solid red; right: 0; bottom: 0; /* 底部黑色边框 */ } input[type="radio"]:checked+label::before { content: ''; position: absolute; right: 2px; bottom: 3px; z-index: 100; width: 3px; height: 7px; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; transform: rotate(45deg); } .triangle { width: 0; height: 0; border-left: 22px solid transparent; /* 左边透明边框 */ border-right: 0 solid; /* 右边透明边框 */ border-bottom: 22px solid #000; /* 底部黑色边框 */ } .check-style-unequal-width { width: 8px; height: 16px; border-color: #fff; border-style: solid; border-width: 0 3px 3px 0; transform: rotate(45deg); } </style> <body> <input type="radio" id="radio1" name="radio-group" /> <label for="radio1">选项一</label> <input type="radio" id="radio2" name="radio-group" /> <label for="radio2">选项二</label> <div class="triangle"></div> <div class="check-style-unequal-width"></div> </body> </html>
