纯css实现三角形--详细原理

ゝ一纸荒年。 2023-01-12 04:21 189阅读 0赞

### 利用css可以实现各种样式的三角形 ###

###### 实现效果 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]

###### 代码如下： ######

<head>
      <meta charset="UTF-8">
      <title>css实现三角形</title>
      <style>
        #tran{
          width: 0;
          height: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-bottom: 100px solid red;
        }
      </style>
    </head>
    <body>
      <div id="tran"></div>
    </body>

1.  实现原理

width: 0;
          height: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-bottom: 100px solid red;
          //div盒子的内容区宽高设置为0。隐藏掉其中三条边的边框
          //剩余一条边框设置宽度以及颜色

1.  隐藏利用transparent属性

border-right: 50px solid transparent;
          //利用这个属性，可以把必要的边框隐藏掉
          //transparent代表着全透明黑色，类似一个rgba(0,0,0,0)这样的值
          background-color:transparent;
          //这样就代表着背景透明

1.  扩展深入其原理：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]

#full{
          width:50px;
          height:50px;
          border-width:20px;
          border-style:solid;
          border-color:#e66161 #f3bb5b red #85bfda;
          //上图对应width和height从50px--25px--0px 三个变化过程
          //可见内容区大小变成0后，整个图形由四个border撑起，为四个三角形构成
        }

1.  **所以，我们想要任意一个三角形都可以通过设置其他三个边框的颜色transparent和保留其中一个的颜色以及宽度就可以。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221119/819222532fd74e519d6b93a3c0a207b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221119/ae0c873b3d2843a19f42baf0b7150fe3.png