纯CSS三角形的一些不得不说的故事

经常会用到三角形（比如对话啊，气泡之类的地方），用于明确指向发言者
总是百度一下成型的写法，一直想研究下，耐不住懒啊
终于打败的我的拖延症，整体下那些关于CSS三角形的故事

分为两种（1）类名；（2）伪类
貌似这两种写法都和border脱不了干系，那我们先来看看 border 的到底是如何作用在盒模型上的

常见盒模型

随便来个盒模型，当当当

.Triangular  .bubble{
    width: 300px;
    height: 100px;
    border-top:10px solid #000;
    border-right:10px solid red;
    border-bottom:10px solid blue;
    border-left:10px solid green;
    margin-top: 20px;
}

原来border的四个边，在拐角相遇的时候，各占45°，嗯~ 很合理

随便来个盒模型

既然这样，那定义类名写三角形就很简单了

一. 定义类名

让内容为0，需要哪个方向的角，写那个方向的boder即可，需要注意的是，单单只写一个方向的border无效，需要相邻方向的border一起来定义，好比这是公共区域，一个人说了不算

//两个方向
.test{
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-right：10px solid transparent;
}
//三个方向
.test{
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-right：10px solid transparent;
    border-left：10px solid transparent;
}

两个方向

三个方向

综上：需要相邻的三个border才能定义一个水平垂直方向的三角形

写的简单一点

.test{
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 10px solid #000;
}

第二步，相对父元素定位

.father{
  position:relative;
}
.test{
    width: 0;
    height: 0;
    border-right: 10px solid #000;
    border: 10px solid transparent;
    //定位
    position: absolute;
    left: -10px;
    top: 10px;
}

相对父元素定位

二. 利用伪类

纯CSS三角形的一些不得不说的故事

推荐阅读更多精彩内容