css：用border实现实心三角形、空心三角形、箭头

最新推荐文章于 2025-03-24 00:59:30 发布

原创最新推荐文章于 2025-03-24 00:59:30 发布 · 3.2k 阅读 ·

大模型引用 1 次

本内容遵循CC 4.0 BY-SA版权协议

牛奶面包吖

关注

标签

#css #javascript #前端

分类前端开发

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用CSS的border属性来创建不同朝向的等腰直角三角形，包括实心三角形、箭头以及空心三角形的实现方法。通过设置边框颜色透明、相对定位以及伪类元素，巧妙地组合成各种形状，展示了CSS在创建图形方面的灵活性。

1.border边框原理

将border属性的值写大点，我们就可以观察到，其实一个盒子的border其实是由三角形组成的。

  <style>
    .triangle{
        width: 0;
        height: 0;
        /*边框大小*/
        border: 100px solid;
        /*边框颜色*/
        border-color: red orange yellow green;
    }
  </style>
</head>
<body>
<div class="triangle"></div>
</body>

效果图：

2.不同朝向的等腰直角三角形

利用transparent属性来设置边框颜色透明:

(1)方向向下的三角形：

.triangle{
        width: 0;
        height: 0;
        /*边框大小、样式、颜色透明*/
        border:100px solid transparent;
        /*上边框颜色*/
        border-top-color: red;
    }

效果图：

（2）方向向右的三角形

.triangle{
	width: 0;
    height: 0;
	border:100px solid transparent;
	border-left-color: orange;
	}

效果图：

（3）方向向上的三角形：

.triangle{
		width: 0;
        height: 0;
		border:100px solid transparent;
    	border-bottom-color: green;
    	}

效果图：

（4）方向向左的三角形：

.triangle{
		width: 0;
        height: 0;
		border:100px solid transparent;
    	border-right-color: yellow;
    	}

效果图：
（5）

.triangle{
        width: 0;
        height: 0;
        /*边框大小、样式、颜色透明*/
        border-top: 100px solid transparent;
        border-right: 100px solid pink;
    }

效果图：

(6)

.triangle{
        width: 0;
        height: 0;
        /*边框大小、样式、颜色透明*/
        border-left: 100px solid transparent;
        border-top: 100px solid darkcyan;
    }

在这里插入图片描述

3.设置有无边框的不同三角形

（1）没有上边框

.triangle{
        width: 0;
        height: 0;
        /*border-top: 60px solid blue;*/
        border-left:100px solid red ;
        border-bottom:100px solid orange ;
        border-right:100px solid greenyellow ;
    }

效果图：

效果图

（2）没有左边框

没有左边框

（3）没有下边框

没有下边框

（4）没有右边框

没有右边框

（5）没有上左边框

.triangle{
        width: 0;
        height: 0;
        border-bottom:100px solid orange ;
        border-right:100px solid greenyellow ;
    }

在这里插入图片描述

（6）没有上右边框

没有上右边框

（7）没有左下边框

没有左下边框

（8）没有下右边框

没有下右边框

4.实现一个箭头

写两个方向向上的三角形，对其中一个进行相对定位，使其与另一个只剩下要显示的“箭头”样式保留，对这一个三角形的颜色设置为白色，用这个白色的三角形掩盖掉另一个三角形即可。同时为了达到掩盖效果，将z-index的层级设置高一点。
--------1.在这里，使用伪类after，在伪类after里写一个三角形，背景颜色设置为红色。

.triangle{
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-bottom-color: black;
    }
    .triangle::after{
        content: '';
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-bottom-color: red;
    }

初始样子：

--------2.对triangle定位设置为相对定位，伪类after里的三角想设置为绝对定位。

.triangle{
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-bottom-color: black;
        /*相对定位*/
        position: relative;
    }
    .triangle::after{
        content: '';
        /*绝对定位*/
        position: absolute;
        top: -80px;
        right: -100px;
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-bottom-color: red;
    }

效果图：

--------3.将伪类三角形背景颜色设置为白色，并且设置z-index，以此来吟唱黑色三角形的某些区域，只保留箭头样式

.triangle{
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-bottom-color: black;
        /*相对定位*/
        position: relative;
    }
    .triangle::after{
        content: '';
        /*绝对定位*/
        position: absolute;
        top: -80px;
        right: -100px;
        width: 0;
        height: 0;
        border: 100px solid transparent;
        /*设置成白色*/
        border-bottom-color: white;
        /*设置层级*/
        z-index: 2;
    }

效果图：

5.实现一个空心三角形

和实现箭头一样，也是用伪类before或者after，在伪类before或者after里绘制一个三角形，但是这个三角形要比另一个三角形小，采用一大一小三角形，进行相对定位和绝对定位，再将伪类里的三角形背景颜色设置为白色即可。
--------1.绘制一大一小的三角形，在伪类after里的三角形要小一些

   .triangle{
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-bottom-color: #0A98D5;
    }
    .triangle::after{
        content: '';
        width: 0;
        height: 0;
        border: 80px solid transparent;
        border-bottom-color: yellow;
    }

起始样子：

--------2.进项相对定位和绝对定位，调整伪类里小三角形的位置

.triangle{
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-bottom-color: #0A98D5;
        /*相对定位*/
        position: relative;
    }
    .triangle::after{
        content: '';
        width: 0;
        height: 0;
        border: 80px solid transparent;
        border-bottom-color: yellow;
        /*绝对定位：*/
        position: absolute;
        top: -70px;
        right: -80px;
    }

现在的样子：

--------3.将伪类的小三角的背景颜色设置为白色

.triangle{
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-bottom-color: #0A98D5;
        /*相对定位*/
        position: relative;
    }
    .triangle::after{
        content: '';
        width: 0;
        height: 0;
        border: 80px solid transparent;
        /*更改背景颜色为白色*/
        border-bottom-color: white;
        /*绝对定位：*/
        position: absolute;
        top: -70px;
        right: -80px;
    }

效果图：