html面试题：通过CSS绘制三角形

持久的棒棒君

已于 2023-08-08 15:53:29 修改

阅读量2.5k

点赞数 8

分类专栏：大杂烩文章标签： css 前端 html

于 2022-03-19 23:35:44 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/123604978

版权

大杂烩专栏收录该内容

259 篇文章 3 订阅

订阅专栏

题目

让你绘制一个如图所示的三角形：
在这里插入图片描述

解决

主要知识点

（1）通过设置标签中的width和height为0来形成三角形
（2）利用border属性中的transparent值，让边框变透明（至于为什么是边框变透明请往后看）

代码实现

    <div class="triangle"></div>

.triangle{
       width: 0px;
       height: 0px;
       border-top: 50px solid red; 
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       border-bottom: 50px solid transparent;
}

分析：

标签的左右下部分都让其透明了，而只让标签的上半部分也就是border-top显示了红色，所以三角形整体的颜色是红色，div边框的宽度就是三角形的大小。

扩展

（1）如果要绘制这样一个三角形呢？
在这里插入图片描述

很简单，只要将border-left设置为blue，其余三条边框设置为transparent就行，如下：

 .triangle{
            width: 0px;
            height: 0px;
            border-left: 50px solid blue;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
}

（2）如果要绘制这样的三角形呢？
在这里插入图片描述
只要将下边框改为绿色就行，如下：

.triangle{
     width: 0px;
     height: 0px;
     border-left: 50px solid blue;
     border-top: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
}

（3）如果我们要绘制这样一个三角形呢？
在这里插入图片描述
其实就只要让这样的一个三角形的底部边框宽度变为0px即可，如图：

代码如下

.triangle{
      width: 0px;
      height: 0px;
      border-left: 50px solid red;
      border-top: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 0px solid transparent;
}

优化

尽管上面的三角形最终画出来了，但你会发现，隐藏的部分还是占了一定的高度，下面，我们将这些隐藏部分的高度消除掉，代码如下：

/*隐藏部分占据一定高度的三角形*/
.triangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 50px 50px 50px 50px;
  border-color: transparent blue transparent transparent;
}
/*隐藏部分高度消除*/
#triangle{
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 50px 50px;
  border-color:transparent transparent red;
}

在这里插入图片描述

补充：绘制三角形更加简便的写法

.div {
	width:0;
	height:0;
	line-height: 0; // 兼容性问题
	font-size:0;
	border: 50px solid transparent;
	border-left-color:red;
}

详细讲解

为什么让边框变透明就可以绘制出三角形了，想了许久，在不断的测试之下，发现了这样一种规律
（1）当把标签div的宽和高都设置为100px，边框的高度设置为50px并且边框颜色各异的时候，形成的图如下

.triangle{
            width: 100px;
            height: 100px;
            border-left: 50px solid red;
            border-top: 50px solid green;
            border-right: 50px solid blue;
            border-bottom: 50px solid yellow;
}

在这里插入图片描述

（2）如果此时我们将标签的宽设置为0px，则出现如下的图示

在这里插入图片描述
（3）接下来，如果我们把标签的高也设置成0px，如下图：

其实就是四根带颜色的比较宽的边框叠加起来，然后形成了三角形的样子。如果我们让黄色的边框隐形或者或说是变透明，那么，就会如下所示

 .triangle{
            width: 0px;
            height: 0px;
            border-left: 50px solid red;
            border-top: 50px solid green;
            border-right: 50px solid blue;
            border-bottom: 50px solid transparent;
}

在这里插入图片描述
可以通过改变边框的高度来改变三角形的形状，如下：

.triangle{
            width: 0px;
            height: 0px;
            border-left: 50px solid red;
            border-top: 100px solid transparent;
            border-right: 80px solid transparent;
            border-bottom: 20px solid transparent;
}

在这里插入图片描述

练习

实现一个空心的三角形

<style>
   /* 内部空心形状为三角形 */
   .triangle_angle {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 0 50px 50px;
     border-color: transparent transparent red;
     position: relative;
     margin: 10px;
   }

   .triangle_angle::after {
     content: "";
     position: absolute;
     left: -30px;
     bottom: -45px;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 0 30px 30px;
     border-color: transparent transparent rgb(248, 253, 249);
   }

   /* 内部空心形状为原型 */
   .triangle_radius {
     position: relative;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 0px 50px 50px 50px;
     border-color: transparent transparent red transparent;
     margin: 10px;
   }

   .triangle_radius::after {
     box-sizing: border-box;
     content: "";
     position: absolute;
     width: 25px;
     height: 25px;
     border-radius: 50%;
     background-color: #eef3ed;
     left: -12px;
     bottom: -40px;
   }
 </style>
</head>
<body>
 <div class="triangle_angle"></div>
 <div class="triangle_radius"></div>
 <script></script>
</body>