CSS小三角

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/b954960630/article/details/82352859

border边框语法：

• border 四条边框设置
• border-left 设置左边框，一般单独设置左边框样式使用
• border-right 设置右边框，一般单独设置右边框样式使用
• border-top 设置上边框，一般单独设置上边框样式使用
• border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用

---

一、先玩玩

1、首先让div1的每条bordor都为50px，效果如下：

<style type="text/css">
#div1{
    border-left: 50px solid yellow;
    border-right: 50px solid red;
    border-top: 50px solid blue;
    border-bottom: 50px solid purple;
}
</style>

<div id="div1">adas</div>

如果我去掉div1中间的字呢，那就长这样了：

2、如果我接着上面，把width，height都设置为0,就长这样了：

<style type="text/css">
#div1{
    border-left: 50px solid yellow;
    border-right: 50px solid red;
    border-top: 50px solid blue;
    border-bottom: 50px solid purple;
    width: 0px;
    height: 0px;
}
</style>

<div id="div1"></div>

3、继续上面，我把其border-right 改为50px solid transparent，
就又变成了下面这样：

<style type="text/css">
#div1{
    border-left: 50px solid yellow;
    border-right: 50px solid transparent;
    border-top: 50px solid blue;
    border-bottom: 50px solid purple;
    width: 0;
    height: 0;
}
</style>

<div id="div1"></div>

4、那如果我接着把border-right去掉呢？就是下面这样了：

<style type="text/css">
#div1{
    border-left: 50px solid yellow;
    border-top: 50px solid blue;
    border-bottom: 50px solid purple;
    width: 0;
    height: 0;
}
</style>

<div id="div1"></div>

5、好，咱们再去掉border-top玩玩，成这样啦：

<style type="text/css">
#div1{
    border-left: 50px solid yellow;
    border-bottom: 50px solid purple;
    width: 0;
    height: 0;
}
</style>

<div id="div1"></div>

---

二、上下左右小三角

由上面我们看的出来，CSS小三角的关键：

• 让width，height均为0
• 利用border的transparent属性让部分变透明

原理：将宽高设置为0，再用border斜切。

1、箭头向右：

#div1{
    border-left: 50px solid yellow;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    width: 0;
    height: 0;
}

2、箭头向下

#div1{
    border-left: 50px solid transparent;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    width: 0;
    height: 0;
}

3、箭头向上

#div1{
    border-left: 50px solid transparent;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
    width: 0;
    height: 0;
}

4、箭头向左

#div1{
    border-right: 50px solid red;
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
    width: 0;
    height: 0;
}