纯CSS 绘制三角形气泡框
1.用纯css绘制带三角型的气泡框，不适合用图片
2.绘制的原理：当width和height均为0时，bord不为0时，边界交换处以45度角平分。
例子：先画一个三角吧
.dr{
width:0px;
height:0px;
border:10px solid black;
border-bottom:10px solid red;
}
<div class=dr></div> 结果：
（1）当我们想要绘制朝上着上方的小三角，只要把黑色区域改为白色或透明即可。border：10px solid transparent 或：border：10px solid #fff
(2)尖朝上的三角形 设置 border-bottom 所以朝左border-right 朝右 border-left 朝下 border-top
3.我们已经绘画了三角型，但是我们要的是三角形边框，改怎么做呢？
思路：外边是一个实的三角形，用上面的方法绘制，里面在做一个小三角形叠在里面，颜色是白色，比外面的三角形小一点点，这样不就留下框了么。
<style>
.content{
width:0px;
height:0px;
border:10px solid black;
border-bottom:10px solid red;
}
.inner{
width:0px;
height:0px;
border:10px solid yellow;
border-bottom:10px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="inner">
</div>
</div>
</body> 
4.经过大神的点播，利用：before和after 来实现这个更方便些
<style>
.content{
width:0px;
height:0px;
border:10px solid transparent;
border-bottom:10px solid red;
margin-left:10px;
}
.content:after{
content:"";
display:block;
width:0px;
height:0px;
border:10px solid transparent;
border-bottom:10px solid white;
position:relative;
top:-9px;
left:-10px;
}
</style> 结果：
相关推荐
猫沙盆 2020-07-07
葉無聞 2020-06-09
buttonChan 2020-04-10
sdbxpjzq 2019-12-03
沈宫新 2020-02-23
sdbxpjzq 2019-11-04
sdbxpjzq 2019-10-26
zengni 2019-10-21
libowen0 2014-07-08
猫沙盆 2017-05-04
zhouguizhi 2018-02-14
ZiXuanFY 2007-04-12
淡风wisdon大大 2019-08-01
我就是停不下来 2019-07-01
jiedinghui 2019-07-01
wangnantjobj 2019-07-01
yongquanx 2019-07-01