CSS 如何画一个实心、带边缘色（气泡聊天框）、圆角的三角形

痛定思痛。 2022-09-04 10:40 256阅读 0赞

点击上方 三分钟学前端，关注公众号

回复交流，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

最终实现效果：（从左到右分别是实心、带边缘色、圆角三角形）

![2d5eb08242ccd3773f607f833612187a.png][] ![27a43bdd101bd20844f81cf11bddc70b.png][]

## 实心三角形 ##

### 步骤一：正方形 ###

先画个正方形：

<div class="filled-triangle"></div>
    <div class="margin-triangle">hi, sister</div>
    <div class="rounded-triangle"></div>
    <style>
      .filled-triangle {
        width: 100px;
        height: 100px;
        border: 1px solid cyan;
      }
    </style>

![6089b2c24a5e2308f6fe42fc26a47c0d.png][]

### 步骤二：加大 border ###

将 border 的值加大，并设为不同的颜色

![0feae9a55eff6173b289e86cb55ce0cf.png][]

### 步骤三：宽高均设为 0 ###

然后把它的高度和宽度去掉，剩下四个border，就变成了：

![7fef9a5b481b885ad2f1caaf1e4fd247.png][]

可以看到，我们现在已经得到四个三角形了

### 步骤四：保留唯一颜色（等腰三角形） ###

想要哪个三角形，就保留哪个三角形的颜色，其他的都设置为透明

![436962e3a44fc7f0a61c6c5a91bb5e68.png][]

这样我们就得到了一个等腰三角形

**简化代码**

其实，我们不需要把四个 border 都设置一遍，只需设置你想要画的三角形所涉及到的三条边的 border 即可

以上步的画最上面的三角形为例，只需设置下、左、右三条边即可

![34ea7c967461d82eaf53a68fb676a17c.png][]

### 不等腰三角形 ###

上图为等腰三角形，之所以为等腰，是因为所有的边框宽度是一样的，如果我们将边框宽度设置为不同，那会怎样？

例如：

![7105f37b726641e0711c609ef021f41d.png][]

我们可以不局限于保留一条边框，我们可以保留两条，于是我们可以告别等腰，得到更加锐利的三角：

![2fba2fb3b094f1c518373fb71058b277.png][]

上面都是底边在水平线上；当底边与水平线不重合时，可以利用宽高比和CSS3中的 transform 属性和 rotate 相结合，来实现我们想要呈现的三角形效果

## 气泡聊天框（带边缘色的三角形） ##

### 步骤一：画圆角矩形 ###

<div class="margin-triangle">hi, sister</div>
    <style>
      .margin-triangle {
        position: relative;
        width: 300px; 
        height: 60px; 
        padding: 10px;
        border: 1px solid cyan; 
        border-radius: 8px;
      }
    </style>

![027d1edbc9367057696cd2e0efb7b198.png][]

### 步骤二：加尖角三角形 ###

#### 1. 画一个深色的三角形 ####

先画一个深色的三角形，然后再画一个同样大小白色的三角形盖在它上面，两个三角形错位 2 个像素，这样深色三角形的边缘就刚好露出一个像素

.margin-triangle::before{
        position: absolute; 
        top: 34px; 
        left: -10px; 
        border-top: 6px solid transparent; 
        border-bottom: 6px solid transparent; 
        border-right: 10px solid cyan;
        content: '';  
      }

![3c79b8978e543a097ed76d766e3ad72e.png][]

#### 2. 画一个白色的三角形盖上去，错位 2 个像素 ####

.margin-triangle::after{
        position: absolute; 
        top: 34px; 
        left: -8px; 
        border-top: 6px solid transparent; 
        border-bottom: 6px solid transparent; 
        border-right: 10px solid #fff;
        content: '';  
      }

![5ccc7cb9b25f881b7ead44b7d507ede2.png][]

## 圆角三角形 ##

### 步骤一：画一个正方形 ###

<div class="rounded-triangle"></div>
    <style>
      .rounded-triangle {
        width:  50px;
        height: 50px;
        background-color: cyan;
      }
    </style>

![3c98f18ba65f0d28941d3f039746bed2.png][]

### 步骤二：画一个菱形 ###

利用 CSS transform 属性旋转、倾斜、缩放

![f4fec184bdbea4e7c4c262af544c9411.png][]

### 步骤三：设置一个角为圆角 ###

.rounded-triangle:after {
        border-top-right-radius: 30%;
      }

![07ed57147561abadf2331b832d763657.png][]

### 步骤四：拼接 3 个带圆角的菱形 ###

<div class="rounded-triangle"></div>
    <style>
      .rounded-triangle {
        width:  50px;
        height: 50px;
        border-top-right-radius: 30%;
        background-color: cyan;
        transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
      }
      .rounded-triangle:before,
      .rounded-triangle:after {
        content: '';
        position: absolute;
        background-color: inherit;
        width:  50px;
        height: 50px;
        border-top-right-radius: 30%;
      }
      .rounded-triangle:before {
        transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%);
      }
      .rounded-triangle:after {
        transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
      }
    </style>

![ec1011dd350a30a3d66a0c8e867d9f9b.png][]

参考：巧妙的实现带圆角的三角形：https://juejin.cn/post/6984599136842547213

## 最后 ##

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

号内回复：

「**网络**」，自动获取三分钟学前端网络篇小书（90+页）

「**JS**」，自动获取三分钟学前端 JS 篇小书（120+页）

「**算法**」，自动获取 github 2.9k+ 的前端算法小书

「**面试**」，自动获取 github 23.2k+ 的前端面试小书

「**简历**」，自动获取程序员系列的 `120` 套模版

》》面试官也在看的前端面试资料《《

“在看和转发”就是最大的

[2d5eb08242ccd3773f607f833612187a.png]: https://img-blog.csdnimg.cn/img_convert/2d5eb08242ccd3773f607f833612187a.png
[27a43bdd101bd20844f81cf11bddc70b.png]: /images/20220829/f9c7a46a42c54f5ba2c7c543cb1e254f.png
[6089b2c24a5e2308f6fe42fc26a47c0d.png]: /images/20220829/53904fcad9454e33b884f286d8c20683.png
[0feae9a55eff6173b289e86cb55ce0cf.png]: /images/20220829/c64229b8845b496d8196e1ed16e269c8.png
[7fef9a5b481b885ad2f1caaf1e4fd247.png]: /images/20220829/6f4a690a26b946cbbcf845ba45dd40ae.png
[436962e3a44fc7f0a61c6c5a91bb5e68.png]: /images/20220829/a5007b87a0fa47d6b278aacd85b6b208.png
[34ea7c967461d82eaf53a68fb676a17c.png]: /images/20220829/c835b5d5494e4da99100bdd9f0909ffc.png
[7105f37b726641e0711c609ef021f41d.png]: /images/20220829/106139fe16ca4d458c9fab0e042238bd.png
[2fba2fb3b094f1c518373fb71058b277.png]: /images/20220829/f6b4e2cf07b0467cb59a34f846535632.png
[027d1edbc9367057696cd2e0efb7b198.png]: /images/20220829/7189f0e1aeb244efa9d6e9fbf9dd6b86.png
[3c79b8978e543a097ed76d766e3ad72e.png]: /images/20220829/e32731591a2f4c33bb5cb2c4749bf6ed.png
[5ccc7cb9b25f881b7ead44b7d507ede2.png]: /images/20220829/e386d57003324b9caec82566a53dea5d.png
[3c98f18ba65f0d28941d3f039746bed2.png]: /images/20220829/bd6b77eda3374a23a757d0d3ea4880da.png
[f4fec184bdbea4e7c4c262af544c9411.png]: /images/20220829/3d0d1954c2314180a12d67ece597f90b.png
[07ed57147561abadf2331b832d763657.png]: /images/20220829/be7680e37cc347109f2e2278d4fbf0d0.png
[ec1011dd350a30a3d66a0c8e867d9f9b.png]: /images/20220829/ade9ee4f56904517a6e26660d7504092.png