CSS三角形带感叹号/* HTML */ <div class= triangle-exclamation > <span class= exclamatio
CSS三角形带感叹号
/* HTML */ <div class="triangle-exclamation"> <span class="exclamation">!</span> <p>这是一段有感叹号的文字</p> </div> /* CSS */ .triangle-exclamation { position: relative; display: inline-block; padding: 0 20px; background-color: #fff; border: 2px solid #f00; border-radius: 5px; } .triangle-exclamation .exclamation { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; line-height: 20px; text-align: center; background-color: #f00; color: #fff; font-size: 14px; border-radius: 50%; transform: rotate(45deg); } .triangle-exclamation p { margin: 0; } .triangle-exclamation:before { content: '; position: absolute; top: -20px; right: 30px; border-width: 10px 10px 0 0; border-style: solid; border-color: #f00 transparent transparent transparent; } .triangle-exclamation:after { content: '; position: absolute; bottom: -20px; right: 30px; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent transparent #f00 transparent; }
上面的代码实现了一个带有感叹号的三角形效果。这个效果可以用于提示用户、提醒用户等等。其中,使用了定位、旋转等 CSS 属性。首先,外部的 div 使用了相对定位,内部的 span 则使用了绝对定位,用于实现感叹号图形的位置定位。同时,使用了伪元素 :before 和 :after 来实现三角形部分。其中,伪元素 :before 实现了感叹号上半部分和三角形底部左边的部分,伪元素 :after 实现了感叹号下半部分和三角形底部右边的部分。在样式中,使用了边框样式 border-style,边框颜色 border-color 以及边框宽度 border-width 等属性,来控制三角形的形状和颜色。如果想要修改感叹号图形或者调整三角形的大小和颜色,可以对样式进行修改。
粉丝
0
关注
0
收藏
0