<div class="content">
<div class="gou"></div>
<div class="cha"></div>
<div class="sanjiao"></div>
<div class="dayu"></div>
</div>
勾
.gou {
height: 30px;
width: 30px;
position: relative;
}
.gou::before,
.gou::after {
content: "";
width: 2px;
background-color: red;
position: absolute;
left: 8px;
bottom: 8px;
}
.gou::before {
height: 30px;
transform-origin: left bottom; /*改变旋转中心点*/
transform: rotate(45deg);
}
.gou::after {
height: 16px;
transform-origin: right bottom;
transform: rotate(-45deg);
}
叉
.cha {
height: 30px;
width: 30px;
position: relative; /*定位伪元素 */
}
.cha::before,
.cha::after {
content: "";
height: 30px;
width: 2px;
display: block;
background-color: red;
position: absolute;
left: 13px;
}
.cha::before {
transform: rotate(45deg); /*旋转角度 */
}
.cha::after {
transform: rotate(-45deg);
}
在框上方画小三角
.sanjiao {
height: 0px;
width: 0px;
border-right: 20px solid transparent; /*利用transparent属性,讲左右边框变为透明*/
border-left: 20px solid transparent;
border-bottom: 20px solid red;
}
画大于号
.dayu {
height: 30px;
width: 30px;
position: relative;
}
.dayu::before,
.dayu::after {
content: "";
height: 16px;
width: 2px;
background-color: red;
position: absolute;
right: 8px;
transform-origin: center bottom;
}
.dayu::before {
transform: rotate(-60deg);
}
.dayu::after {
transform: rotate(-120deg);
}