CSS实现三角形（详细）_css 三角形-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61716556/article/details/121600080

本文介绍了如何使用CSS来创建三角形，包括利用边框颜色和透明度实现不同类型的三角形，以及在网页设计中的应用，如菜单箭头、气泡提示框等。通过调整边框宽度和颜色透明度，可以创建各种形状和方向的三角形，为空心三角形和带三角形的气泡框提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三角形的广泛应用

网页设计中我们常常能见到各类三角形，比如二级菜单，下拉列表，三角形作为一个简单的图标能够清晰明了的表明页面的模块和功能。在具体的页面设计过程中可以直接使用背景图片实现，也可以通过CSS代码实现三角形功能。因一般设计时CSS实现三角形简单快捷，这里推荐使用CSS实现三角形。除非三角形图片特别细致精美，优于直接代码实现效果。

三角形具体实现原理

一般盒模型的四个边框的连接处由于颜色统一导致细节部分被忽略。当把一个盒子边框设置为四种颜色时，边框处的细节便暴露出来。细节如下。

可以看到四个角的地方边框均分导致出现斜边，斜边就是三角形形成的基础线段。这时把斜边组合起来就能与上下左右的边框组合为三角形。此时把盒子宽高去掉，让四个边框紧挨在一起。

效果如上图。

此时我们已经实现了4个三角形，只取其中一个三角形，设置其他三个三角形区域颜色透明度，使其完全透明，达到不可视效果即可。

实现方式一

用颜色中的rgba实现即可（red,green,blue,alpha）。最后一个数值即是对象的不透明度属性。值为1，完全可视，值为零，完全不可视。半透明效果可设置为0到1的其中任意值，一般取0.5。

实现方式二

用CSS中的transparent属性设置。同样是指定不透明度，可以直接用在border-top-color,border-bottom-color,border-left-color,border-right-color处.

~~实现方式三~~

应该说是透明的实现方式(纯粹当作拓展，只是学习实现三角形的话该部分可以直接跳过)

使用opacity。该属性可对元素使用，不能选中border，故不能实现三角形。取值从0.0到1.0。类似与rgba中的最后一个alpha。

注意：该属性可继承。使用时会使其子元素同样透明或不透明。使用时应小心元素的子元素的该属性是否被继承。一般推荐使用rgba设置颜色实现不透明度的调整。

透明其他三个三角形的实现效果如下：

具体实现三角形的形状可以由不透明的边框决定。代码区段如下：

具体代码

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优快云测试专用</title>
    <style>
    .div{width:0px;
        height:0px;
        border:10px solid transparent;/*以下四个样式对应四种三角形，任选其一即可实现*/
        /* border-top-color:lightseagreen; */
        /* border-left-color:lightseagreen; */
        /* border-right-color:lightseagreen; */
        border-bottom-color:lightseagreen;
    }
    </style>
</head>
<body>
   <div class="div"></div>
</body>
</html>

其他几种三角形

上例中实现的是简单的等腰直角三角形，当边框宽度不一致时，形成的斜边也会有一定的偏移。由此可得到其他几种不同的三角形。各边框宽度不相同时：

只设置部分边框有宽度时：（无上边框）（无上左边框）（无上右左边框）

：

当div元素嵌套时可设置出空心三角形或是带三角形的气泡框。实例如下：

这些元素在网页布局中十分常见。空心三角形可用于上一页或下一页的按钮。菜单栏的标志，（简单明了，用户一眼就能看懂某处是否含有菜单栏），带三角形的气泡框可用于页面内容所属类型的动态切换。

实现的核心思想

空心三角形

同样是使用三角形，加上伪类选择器before或after。before或after里设计一个三角形，其中一个背景颜色与环境颜色相同（一般为白色），用白色的三角形掩盖住另一个三角形即可达到三角形空心的目的。

注意：掩盖过程一般使用定位，容器设置为相对定位（不脱离文档流），三角形设置绝对定位。通过top,left,bottom,right调整位置即可。

这时为了达到掩盖效果，应使用z-index设置使背景色三角形能够掩盖另一个三角形。

带三角形的气泡框

本例实际可拆分为一个盒子和一个空心三角形。这时可同时设置before和after。各自设置好边框组成三角形相互掩盖即可达到效果。

具体代码如下：

<!DOCTYPE html>
<html lang="zn-ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优快云测试-实现带三角形的气泡框</title>
    <style>
    .div{
        width:300px;
        height:300px;
        border: 10px solid #0082df;
        position: relative;
    }
    .div::after{
        content: "";
        position: absolute;
        right:60px;
        top:300px;
        width:0px;
        height:0px;
        border:30px solid transparent;
        border-top: 30px solid #0082df;
    }
    .div::before{
        content: "";
        position: absolute;
        top:295px;
        left:180px;
        z-index: 1;
        width:0px;
        height: 0px;
        border: 30px solid transparent;
        border-top:30px solid #fff;  
    }
    </style>
</head>
<body>
   <div class="div">
   </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zn-ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优快云测试专用-实现空心三角形</title>
    <style>
    .div{
        width:0px;
        height:0px;
        border: 100px solid transparent;
        border-bottom-color: #0082df;
        position: relative;
    }
    .div::after{
        content: "";
        position: absolute;
        right:-100px;
        top:-80px;
        width:0px;
        height:0px;
        border:100px solid transparent;
        border-bottom-color: #fff ;
        z-index: 2;
    }
    </style>
</head>
<body>
   <div class="div">
   </div>
</body>
</html>

具体在浏览器实现效果可能因浏览器不同而有差别，但只要掌握核心思想，实现以上效果并不难。