css手绘三角形及相关样式

1、三角形的前身

举个例子：设置一个300*300的矩形，矩形加宽为100px的实线边框，四条边设置是个不同的颜色（注意：边框颜色的设置顺序是：top right bottom left）

js 复制代码

//html
<div class="rect"></div>
//css
.rect{
    width:300px;
    height: 300px;
    border-style:solid ;
    border-width: 100px;
    border-color: red green blue orange;
    box-sizing: border-box;
}

由此我们得到下图：

矩形总宽度300px，左右两侧边框宽度100px，所以中间没有被填充的空白宽度也是100px; 同理，如果把边框宽度改成150px那么中间就没有空白区域了，所以我们可以得到如下图形：

映入眼帘的是四个不同颜色三角形拼凑的矩形。

2、变身三角形

如果只想要一个三角形而不是四个三角形怎么办？继续用以上的代码，保留top方位的边框色为蓝色其他方位的边框色设置为白色或者透明，于是我们得到如下下图形：

js 复制代码

 border-color: red green blue orange;
 //或者
 border-color: red transparent transparent transparent;

下三角就这样诞生了！

3、其他方向的三角形

那么我们尝试按照上右下左的顺序把其他方向的边框区域填充白色或者透明色：

js 复制代码

 border-color: red transparent transparent transparent; //下三角
 border-color: transparent red transparent transparent; //左三角
 border-color: transparent transparent red transparent; //上三角
 border-color: transparent transparent transparent red; //右三角

由上图我们得出结论：

需要下三角形时只需要设置top边框的颜色，需要左三角形时只需要设置right边框的颜色...... 三角形的方向和其对应的矩形边框顺序相反

4、三角形的应用场景

三角形角标

作为前端肯定遇到这样的交互形式，选择图片等内容时在其拐角处加三角形的角标。实现角标有以下几种方式：

图片
iconfont角标字体
css画三角形样式+'√'

当然，我们这里用的是第三种。如下图所示右上角是直角三角形 ，和上面我们介绍的等腰三角形稍微有点差别，那么怎么实现呢？首先我们继续用三角形前身的四色图，通过观察发现该矩形中有四个直角三角形（每两个相邻的三角形拼成一个直角三角形）

js 复制代码

//html
<div class="rect"></div>
//css
.rect{
    width:300px;
    height: 300px;
    border-style:solid ;
    border-width: 150px;
    border-color:blue blue  red  red ;//改变相邻的色值就可以得到不同方向的直角三角形
    box-sizing: border-box;
}

实现角标也轻而易举了。

js 复制代码

//html
<div class="video-wrapper f-mgt20 active">
    <div class="video-cover">
        <img src="../../upload/cover1.png"> 
        <a class="iconfont icon-bofang"></a> 
        <i class="iconfont icon-duigou confirm"></i>
     </div> 
</div>
//css
.video-list .video-wrapper.active::before{
    content : "";
    position : absolute;
    z-index: 100;
    display : block;
    width: 30px;
    height: 30px;
    top: 0;
    right: 0;
    border-width: 15px;
    border-style: solid;
    border-color: #189954 #189954 transparent transparent;
}

三角形对话框

常见的对话框，"三角形+矩形"。矩形很简单这里不必赘述，通过上面学习画三角形，三角形的样式也迎刃而解。以下是对话框的实现方法。

js 复制代码

//html
<li>
    兴趣：<br>
    美食；健身；家电
</li>
//css
li{
    border:1px solid rgba(58,88,227,.3);
    padding:10px;
    border-radius: 4px;
    margin-bottom:10px;
    position: relative;
    background-color: #fff;
}
li::after{
    content:"";
    position: absolute;
    top:10px;
    z-index: 5;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: transparent red transparent transparent;
    border-width: 8px;
}

3.箭头对话框

以前遇到这种需求的时候莫名的头大，三角形就是用边框画出来的，这种只有边框的三角形该如何画呢？

遇到这种问题不是找设计产品经理商量这种箭头实现不了需要换成实心的三角形，就是直接换成图片暴利解决。

有一天，灵光乍现！
为何不用两个三角形叠加在一起呢？！ 蓝色的三角形上面放置绝对定位的白色三角形，白色三角形的偏移量设置为边框线的大小。

js 复制代码

.rect-wrapper{
        width: 300px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin:30px auto 0;
        position: relative;
        overflow: hidden;
    }
    .rect::before,
    .rect{
        width:300px;
        height: 300px;
        border-style:solid ;
        border-width: 150px;
        border-color:transparent  red  transparent  transparent ;
        box-sizing: border-box;
    }
    .rect::before{
        content: "";            
        border-color:transparent  white  transparent  transparent ;
        position: absolute;
        top:0;
        left:7px;

}

因此箭头对话框的实现也如探囊取物一般了~

边学习边整理，如有问题欢迎指正，侵删~