CSS----border绘制三角形和箭头

以你之姓@ 2023-06-03 09:55 69阅读 0赞

首先来看在为元素添加border时，border的样子；假设有如下代码：

<div></div>
    
    div {
        width: 50px;
        height: 50px;
        border: 2px solid orange;
    }

![在这里插入图片描述][20191006112128936.png]  
这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容易让大家对border的形成方式产生误解，即认为元素的border是由四个矩形边框拼接而成。

然而事实并不是这样。实际上，元素的border是由三角形组合而成，为了说明这个问题，我们可以增大border的宽度，并为各border边设置不同的颜色：

div {
        
        width: 50px;
        height: 50px;
        border: 40px solid;
        border-color: orange blue red green;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]  
既然如此，那么更进一步，把元素的内容尺寸设置为0会发生什么情况呢？

div {
        
        width: 0;
        height: 0;
        border: 40px solid;
        border-color: orange blue red green;
    }

![在这里插入图片描述][20191006112336243.png]  
我们将惊奇地发现，此时元素由上下左右4个三角形“拼接”而成；那么，为了实现最终的效果，即保留最下方的三角形，还应该怎么做？很简单，我们只需要把其它border边的颜色设置为白色或透明色：

div {
        
        width: 0;
        height: 0;
        border: 40px solid;
        border-color: transparent transparent red;
    }

![在这里插入图片描述][20191006112424140.png]  
不过，被“隐藏”的上border仍然占据着空间，要想使得绘制出的三角形尺寸最小化，还需要将上border的宽度设置为0（其它情况同理）：

div {
        
        width: 0;
        height: 0;
        border-width: 0 40px 40px;
        border-style: solid;
        border-color: transparent transparent red;
    }

**实现带边框的三角形**  
![在这里插入图片描述][20191006112645592.png]  
由于不能继续通过为已有三角形设置border的方法来为其设置边框（因为三角形本身就是利用border实现的），所以只好另想办法。而能想到的一个最自然的方法就是三角形叠放，即把当前三角形叠放在更大的三角形上方，上图所示的实现方法就是把黄色三角形放在了尺寸更大的蓝色三角形上。  
为了实现这样的效果，需要利用绝对定位方法：  
首先定义出外面的蓝色三角形：

<div id="blue"><div>
    
    #blue {
        position:relative;
        width: 0;
        height: 0;
        border-width: 0 40px 40px;
        border-style: solid;
        border-color: transparent transparent blue;
    }

![在这里插入图片描述][20191006112813675.png]  
随后需要定义黄色三角形，由于黄色三角形的定位需要参考蓝色三角形的位置，所以需要用到绝对定位方法。为此还需要将黄色三角形作为蓝色三角形的子元素。一个可行的办法是在蓝色三角形内部定义一个额外的标签以表示黄色三角形，但为了节约标签起见，更好的办法是使用伪元素:

#blue:after {
        
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 0px;
        left: 0px;
        border-width: 0 40px 40px;
        border-style: solid;
        border-color: transparent transparent yellow;
    }

![在这里插入图片描述][20191006112918510.png]  
需要特别注意此时定义出的黄色三角形与蓝色三角形之间位置的偏移关系，该偏移将受到top、left（本例中）以及黄色三角形本身border宽度的共同影响。

可能会有这样的疑问：为什么黄色三角形会向左偏移一段距离呢，按道理不应该完全重合在蓝色三角形上吗，就像下面这样？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 1]  
如果有这样的疑问，说明还没有对绝对定位产生足够的认识。绝对定位的区域是基于绝对定位父元素的padding区域，然后在此基础上运用top、left、right、bottom等一系列属性来约束绝对定位子元素的位置。在本例中，由于蓝色三角形作为绝对定位父元素，其内容的尺寸为0，则内容区域就是该三角形的上顶点：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 2]  
对于黄色三角形，由于设置了left: 0和top: 0，所以黄色三角形的所有内容（包括border、margin）将根据蓝色三角形的上顶点进行定位。可以把此时left: 0和top: 0分别看作是两面“隔墙”——即上隔墙和左隔墙，黄色三角形的所有内容只能在上隔墙的下方和左隔墙的右方区域。

由于黄色三角形的内容区域也位于其顶点处，且对其设置了左右各40px的border，所以黄色三角形的内容区域将向右偏移40px，从而形成了之前的效果。  
搞懂了绝对定位后，只需要在原代码上稍作修改就可以将黄色三角形的顶点与蓝色三角形顶点相重合，同时还应该适当缩小黄色三角形的尺寸（按相似三角形等比例缩小）：

#blue:after {
        
        content: "";
        position: absolute;
        top: 0px;
        left: -38px;
        border-width: 0 38px 38px;
        border-style: solid;
        border-color: transparent transparent yellow;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 3]  
在上面的代码中，特意删除了之前对width: 0和height: 0的设置，因为子元素具有position:absolute设置，这会使得元素尺寸在不显式设置宽度和高度的情况下，收缩到元素内容的尺寸，由于内容设置的是content: “”，所以子元素的尺寸默认也就是0了。故设置width: 0和height: 0就变得多余了。

最后一步就是利用top将黄色三角形向下移动至合适的位置：

#blue:after {
        
        content: "";
        position: absolute;
        top: 1px;
        left: -38px;
        border-width: 0 38px 38px;
        border-style: solid;
        border-color: transparent transparent yellow;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 4]  
学会了带边框三角形的绘制，那么实现类似如下三角形箭头自然也是不在话下了：  
![在这里插入图片描述][20191006113436143.png]

#blue:after {
        
        content: "";
        position: absolute;
        top: 2px;
        left: -38px;
        border-width: 0 38px 38px;
        border-style: solid;
        border-color: transparent transparent #fff;
    }

可以通过，一种样式，来实现不能角度的三角形，那就是利用CSS3里面的旋转`transform:rotate(90deg)`。

[20191006112128936.png]: /images/20230601/e16344e71bb24961b3aee954c8bd46a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]: /images/20230601/0fa74f0f0a8a4e898861252db6d232ce.png
[20191006112336243.png]: /images/20230601/b5d272eccd8e4569a9aa4ee673ddc009.png
[20191006112424140.png]: /images/20230601/1fcda2bea87b4c7fb5ca4c4d02bd44c9.png
[20191006112645592.png]: /images/20230601/447d2a9714884d6bb2ff67d704d362c8.png
[20191006112813675.png]: /images/20230601/635d44ea90a84237b6944f689a8f9420.png
[20191006112918510.png]: /images/20230601/866b27d7d28f46c0bb4328baa6b32fe8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 1]: /images/20230601/866a6fb1658141ef9bdb1ebc33d8d09a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 2]: /images/20230601/73964fb361234176bfe9c6f49d557062.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 3]: /images/20230601/d645b8e0d6ce42278ffd6a3ae45cd0a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70 4]: /images/20230601/1fca6f8b27684f1b8b7e8181a81d4e7f.png
[20191006113436143.png]: /images/20230601/a7102d638ec049ad8da3f5470175d1f2.png