.error { width: 50px; height: 50px; position: relative; } .error::before, .error::after { content: ''; width: 15px; height: 2px; background-color: #f00; position: absolute; } .error::before { transform: rotate(45deg); } .error::after { transform: rotate(-45deg); }
在这段代码中,大家使用了伪元素:before和:after来画出错号的两条线。大家首先将.width和.height设置为50px,这样就可以控制图形的大小。接着,使用position属性设置图形的位置。并通过transform:rotate()函数将这两条线旋转45度和-45度,实现画出错号的效果。
在HTML中使用如下代码来使用这个样式。
<div class="error"></div>
在这段代码中,大家创建一个class为error的div,使用上述的CSS样式,即可画出大家想要的错号效果。
通过这个简单的例子,相信大家已经掌握了使用CSS来画出错号的方法。CSS真是一个强大的工具,可以为网页的美观程度增添很多元素。希望大家都能熟练掌握CSS的使用,为自己的网页增色添彩!