美文网首页
纯CSS三角形的一些不得不说的故事

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

作者: _安哥拉 | 来源:发表于2017-11-08 21:52 被阅读37次

经常会用到三角形(比如对话啊,气泡之类的地方),用于明确指向发言者
总是百度一下成型的写法,一直想研究下,耐不住懒啊
终于打败的我的拖延症,整体下那些关于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三角形的一些不得不说的故事

      本文链接:https://www.haomeiwen.com/subject/prsugttx.html