CSS--小三角的制作

介绍

接下来我将为大家介绍CSS里各种小三角的制作，希望大家多多点赞支持一下
比如说这种：

还有这种：

以及这种：

代码及实现

第一种

第一种是比较简单的一种，有着比较固定的写法

<div class="app">
        下载app
    </div>

*{
            margin: 0;
            padding: 0;
        }
        .app{
            position: relative;
            width: 100px;
            height: 30px;
            background-color: aqua;
            text-align: center;
            vertical-align: middle;
        }
        .app::after{
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

这里的逻辑是：

1. 设置一个盒子宽高都为0，然后只设置边框大小
2. 这里边框颜色全部设置为透明
3. 接下来就考虑你要的三角形的朝向
   上面代码是这种：
   
   如果将参数改成这样：

border-right: none;
border-left-color: #fff;

就成了这样：

其他的同理！！

第二种

这种是第一种的升级版，实现原理是用一个小的来覆盖掉大的颜色

<div class="fi">
        <div class="left"></div>
        <div class="right">
            <div class="arrow1"></div>
            <div class="arrow2"></div>
        </div>
    </div>

*{
            margin: 0;
            padding: 0;
        }
        .fi{
            display: flex;
            width: 200px;
            height: 50px;
            background-color: #187df1;
        }
        .left{
            width: 100px;
            height: 50px;
            border-right: 1px solid aquamarine;
        }
        .right{
            position: relative;
            width: 100px;
            height: 50px;
            background-color: aquamarine;
        }
        .arrow1{
            position: absolute;
            width: 0;
            height: 0;
            top: 50%;
            transform: translateY(-50%);
            border: 8px solid transparent;
            border-right: none;
            border-left-color: #fff;
        }```
一开始先是这样子的：
![3](https://img-blog.csdnimg.cn/20210524192901325.png)
在加个覆盖的代码：

```css
.arrow2{
            position: absolute;
            width: 0;
            height: 0;
            top: 50%;
            transform: translateY(-50%);
            border: 7px solid transparent;
            border-right: none;
            border-left-color: aquamarine;
        }

第三种

这个就是第一种的变形，这里的原理是对不同边设置不同长度

<div class="box"></div>

.box{
            width:0;
            height:0;
            border-color:transparent red transparent transparent;
            border-style:solid;
            border-width:22px 8px 0 0;
            /*不同的是这里设置不同的宽度！！！！*/
        }

结尾

大概我能想到的小三角就只有着三种，如果大家看完文章有所收获，麻烦帮我点下赞！salute！！！