css实现对话框的方法:首先创建一个HTML示例文件;然后让父元素相对定位;接着用css的伪类before或after写个三角形;最后通过设置css样式实现对话框即可。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示:
示例图片
那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after。就可以写个三角形,如果想要带边框的三角形,则可以两个重叠使用。代码如下:
<p class=Box2> 纯css写带小三角对话框 </p>
.Box2{ float:left; position:relative; width:200px; height:100px; border:1px solid #00f; margin:50px; Box-sizing:border-Box; font-size:14px; padding:10px; Box-shadow:0 0 2px rgba(0,0,0,.5) } .Box2:before, .Box2:after{ position:absolute; content:''; border:10px solid; } .Box2:before{ right: -20px; top:20px; border-color: transparent transparent transparent #00f; } .Box2:after{ border-color: transparent transparent transparent #fff; right: -18px; top: 20px; }
推荐学习:css视频教程
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。