当前第2页 返回上一页
那么如何用css写出来呢，其实很简单，先让父元素相对定位，然后运用css的伪类before或after。就可以写个三角形，如果想要带边框的三角形，则可以两个重叠使用。代码如下：
1 2 3 | <p class="box2">
纯css写带小三角对话框
</p>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .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视频教程
以上就是css怎么实现对话框的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css怎么设置按钮边框的颜色
html中序列化标签的简单介绍（代码实例）
css圣杯布局和双飞翼布局的区别是什么？
css的基本语法是什么
css如何设置链接颜色
koala如何压缩css
css3如何实现图片滚动播放效果（附代码）
css如何设置行间距
css如何为div添加阴影效果
css如何设置最小宽度
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css怎么实现对话框
