经典面试题:如何使用CSS画一个三角形？

﹏ヽ暗。殇╰゛Y 2023-10-12 08:56 37阅读 0赞

**文章目录**

一、前言

二、如何实现?

1.实现简易三角形

2.实现空心三角形

三。小结

--------------------

## 一、前言 ##

在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择或者播放器里面播放按钮,

通常情况下，我们会使用图片或者`svg`去完成三角形效果图，但如果单纯使用`css`如何完成一个三角形呢？

实现过程似乎也并不困难，通过边框就可完成

![ebfee0780e744131b8e076d726ee83ae.png][]

## 二、如何实现? ##

### 1.实现简易三角形 ###

前置小知识:当块级元素宽高都为0,且只设置边框的时候,则会构成正方体。具体实现如下

div {
                    width: 0;
                    height: 0;
                    border: 50px solid red;
                }

效果如下

![9b06252e9b56411a822ead63cc5cf65a.png][]

实质上上下左右的边框都是一个三角形，所以我们 显示我们想要的三角形，隐藏其他三个方向的三角形即可。

假如我们想留下上边的三角形

div {
                    width: 0;
                    height: 0;
                    /* 排他思想，给全部的边框设置为透明 */
                    border: 50px solid transparent;
                    /* 单独给你想要的三角形设置样式 */
                    border-top: 100px solid red;
                }

效果如下

![392dbaa0f18f413e9c2aa98af37ea96d.png][]

### 2.实现空心三角形 ###

> 如果想要实现一个只有边框是空心的三角形，由于这里不能再使用`border`属性，所以最直接的方法是利用伪类新建一个小一点的三角形定位上去

**(1).当为div添加伪类利用绝对定位 初始定位left:0 right:0,后面再进行调整**

div {
                    width: 0;
                    height: 0;
                    border: 50px solid transparent;
                    border-bottom: 50px solid red;
                    position: relative;
                }
                div::after {
                    content: '';
                    border: 40px solid transparent;
                    border-bottom: 40px solid green;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                }

现在初始的效果如下

![5bdb81c9e3b948fca7591b8d8ea054d6.png][]

**(2).随后再对伪类元素(绿色三角形)进行位置的调整和设置 border-bottom颜色为white，达到中间空心的效果**

代码如下

div {
                    width: 0;
                    height: 0;
                    border: 50px solid transparent;
                    border-bottom: 50px solid red;
                    position: relative;
                }
                div::after {
                    content: '';
                    border: 40px solid transparent;
                    /* 将伪类元素的三角形设置为白色，达到空心的效果 */
                    border-bottom: 40px solid white;
                    position: absolute;
                    /* 调整伪类元素的位置 */
                    top: -34px;
                    left: -39px;
                }

达到的最终效果如下

![cb77647f60384e3d8e0b4185ab66469c.png][]

## 三。小结 ##

以上我们实现了用css绘制三角形的两种方法，再实际开发中应该也会遇到，我们不仅仅可以使用字体图标库实现需求，我们自己也可以通过原生的css实现需求。

[ebfee0780e744131b8e076d726ee83ae.png]: https://img-blog.csdnimg.cn/ebfee0780e744131b8e076d726ee83ae.png
[9b06252e9b56411a822ead63cc5cf65a.png]: https://img-blog.csdnimg.cn/9b06252e9b56411a822ead63cc5cf65a.png
[392dbaa0f18f413e9c2aa98af37ea96d.png]: https://img-blog.csdnimg.cn/392dbaa0f18f413e9c2aa98af37ea96d.png
[5bdb81c9e3b948fca7591b8d8ea054d6.png]: https://img-blog.csdnimg.cn/5bdb81c9e3b948fca7591b8d8ea054d6.png
[cb77647f60384e3d8e0b4185ab66469c.png]: https://img-blog.csdnimg.cn/cb77647f60384e3d8e0b4185ab66469c.png