border画三角形和对话气泡

嗯，因为最近碰到了利用了三角形做一些小图标的需求（以前都是直接用ui给的图标，但是说不利于资源优化），soso,然后就网上查了一下资料，然后自己整理了一波。

---

首先是画三角形

html

<div class="triangle_1">

</div>
<div class="triangle_2">

</div>
<div class="triangle_3">

</div>
<div class="triangle_4">

</div>
<div class="triangle_5">

</div>
<div class="triangle_6">

</div>
<div class="triangle_7">

</div>
<div class="triangle_8">

</div>

css

div{
    float: left;
    margin:10px;
}
.triangle_1{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
.triangle_2{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}
.triangle_3{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}
.triangle_4{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}
.triangle_5{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
.triangle_6{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}
.triangle_7{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
.triangle_8{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

效果图

接下来是利用伪元素after进行绘制气泡对话框

html

<div class="bubble_1">

</div>
<div class="bubble_2">

</div>
<div class="bubble_3">

</div>
<div class="bubble_4">

</div>

css

div{
    float:left;
    margin:20px;
}
.bubble_1{
    width: 200px;
    height: 100px;
    position: relative;
    background:red;
    border-radius: 10px;
}
.bubble_1::after{
    content:  '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top:-20px;
    left:50%;
    transform: translateX(-50%);
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom: 20px solid red;
}
.bubble_2{
    width: 200px;
    height: 100px;
    position: relative;
    background:red;
    border-radius: 10px;
}
.bubble_2::after{
    content:  '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    right:-20px;
    top:50%;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-left: 20px solid red;
    border-bottom: 10px solid transparent;
}
.bubble_3{
    width: 200px;
    height: 100px;
    position: relative;
    background:red;
    border-radius: 10px;
}
.bubble_3::after{
    content:  '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    bottom:-20px;
    left:50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid red;
}
.bubble_4{
    width: 200px;
    height: 100px;
    position: relative;
    background:red;
    border-radius: 10px;
}
.bubble_4::after{
    content:  '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left:-20px;
    top:50%;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-right: 20px solid red;
    border-bottom: 10px solid transparent;
}

效果图

接下来就是大伙根据自己的需求进行改动了，大致的样子和思路就是这样子咯，老铁们！！

border绘制三角形和气泡对话框