今天我们来讲一下如何给网页中的文本框、按钮或图片添加三角提示框。三角提示框可以更加直观地提示网页中的一些信息,使得网页更加美观。 首先,我们可以使用CSS的伪元素:before或:after来添加三角
<style> .triangle { position: relative; padding: 10px; background: #F4F4F4; border: 1px solid #DDD; } <br> .triangle:before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); border: solid transparent; border-width: 0 10px 10px 10px; border-bottom-color: #F4F4F4; } </style> <br> <div class="triangle">这是一个有三角形的提示框</div>
.triangle:after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border: solid transparent; border-width: 10px 10px 0 10px; border-top-color: #F4F4F4; }
粉丝
0
关注
0
收藏
0