使用css中的border绘制三角形的方法和原理.主要代码就是style中的border样式。首先宽高设为0，borde

本文已参与「新人创作礼」活动，一起开启掘金创作之路

实现

首先看看怎么实现的贴上代码;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .sjx{
            width: 0px;
            height: 0px;
            border-width: 40px;
            border-style: solid;
            border-color: transparent transparent transparent red;
        }
    </style>
</head>
<body>
    <div class="sjx"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .sjx{
            width: 0px;
            height: 0px;
            border-width: 40px;
            border-style: solid;
            border-color: transparent transparent transparent red;
        }
    </style>
</head>
<body>
    <div class="sjx"></div>
</body>
</html>

效果图：

在这里插入图片描述

分析代码

主要代码就是style中的border样式。首先宽高设为0，border-width就是三角形的高度，border-color（上，右，下，左）这里把前三个设置为透明，第四个设置为红色，所以三角形方向是向右的。
为了方便理解，这里把border-color四个颜色都设置出来看看
在这里插入图片描述

这里可以这么理解:由于div宽高设置为0，而边框为40px就会出现一个80*80的正方形，上下左右平分则是四个三角形。但如果不设置下边框而设置其他三个边框则会如下图：
在这里插入图片描述

从这里可以看出没了下边框就变成了40*80的长方形，所以实质上这个正方形还是4个40*80的矩形拼成的。
但是如果只设置左右，或者上下的边框则什么也没有，因为div长宽都为0，则显示不出来，这里之所以会显示是因为上下和左右至少各有一个，会互相赋值，比如上边框高度为40px由于没有宽度则不显示，此时如果设置一个左边框会把左边框的高40px赋值给上边框的框则会显示出来。