html 图标错误的是什么,html – 如何仅使用css绘制错误图标,与图像完全相同

真正的平局看起来像这样

*{box-sizing: border-box}

:root{background: #ccc}

div{

width: 150px;

height: 150px;

border-radius: 50%;

position: relative;

margin: 40px auto;

box-shadow: 0 0 0 10px white

}

div:before, div:after{

content: '';

position:absolute;

width: 20px;

height: 100px;

left: 64px;

top: 25px;

background: white

}

div:before{

transform: skew(28deg)

}

div:after{

transform: skew(-28deg);

}

如果你想要它看起来更真实添加一些阴影

*{box-sizing: border-box}

:root{background: #ccc}

div{

width: 150px;

height: 150px;

border-radius: 50%;

position: relative;

margin: 40px auto;

box-shadow: 0 0 0 10px white, 0 0 24px 12px #B3B3B3, inset 0 0 16px 1px #B3B3B3;

}

div:before, div:after{

content: '';

position:absolute;

width: 20px;

height: 100px;

left: 64px;

top: 25px;

box-shadow: 0 0 16px 1px #B3B3B3;

background: white

}

div:before{

transform: skew(28deg)

}

div:after{

transform: skew(-28deg);

}

红色背景的结果相同

*{box-sizing: border-box}

:root{background: #ccc}

div{

background: red;

width: 150px;

height: 150px;

border-radius: 50%;

position: relative;

margin: 40px auto;

box-shadow: 0 0 0 10px white, 0 0 24px 12px #B3B3B3, inset 0 0 16px 1px #B3B3B3;

}

div:before, div:after{

content: '';

position:absolute;

width: 20px;

height: 100px;

left: 64px;

top: 25px;

box-shadow: 0 0 16px 1px #B3B3B3;

background: white

}

div:before{

transform: skew(28deg)

}

div:after{

transform: skew(-28deg);

}

现在你准备好使用transform：scale(.5,.5);在div上有多种尺寸