用CSS实现三角形、等腰梯形等根本原理以及编码实现

最新推荐文章于 2025-06-04 11:35:40 发布

原创最新推荐文章于 2025-06-04 11:35:40 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端同时被 2 个专栏收录

33 篇文章

订阅专栏

css

6 篇文章

订阅专栏

这篇博客介绍了如何使用CSS来创建三角形和等腰梯形。通过调整border属性，可以实现三角形的制作。透明边框用于隐藏不需要的部分，从而形成绿色三角形。接着，通过组合三角形和正方形，利用浮动或inline-block布局，再配合transform属性，可以创造出等腰梯形。提供了详细的实现代码。

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

实现原理

关键实现因素在于border的top right left bottom属性，看下面这样一段css样式：

.triangle {
    height: 0px;
    width: 0px;
    border-top: 50px solid gold;
    border-right: 50px solid gray;
    border-bottom: 50px solid green;
    border-left: 50px solid yellow;
}

生成的样式是分别设置每个方向，当然如果你觉得分别设置四个有点冗杂，你去掉了某一个，比如去掉border-left这一行，你会发现上图变成了这样去掉左边，这样好像离答案近了一步。

三角形

接下来如果需要下面绿色的三角形，我们需要将上面两三角形设为好像隐形一样，这就需要 border的另一个属性值transparent，将上面代码改为

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

此处我们想要的三角形就得到了，图片就不显示出来了。

等腰梯形

在已经实现的三角形基础上，能想到再画一个这样的三角形和正方形拼接一下能得到等腰梯形，三个div实现效果如图，在这里插入图片描述，但是这三个div由于是块级元素，要想拼接，我们得给它设置显示位置，可以通过浮动或inline-block，在这里选择后者，得到这样一张图，到这一步大家都知道怎么做了，将左边和右边的三角形都移动一下，需要用到transform的某属性值就okk啦。
最终效果
在这里插入图片描述
实现代码如下

<!-- html -->
<div class="trapezoid">
			<div class="part1"></div>
			<div class="part2"></div>
			<div class="part3"></div>
</div>

/* css */
.part1{
    height: 0px;
    width: 0px;
    border-top: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid green;
    display: inline-block;
    transform: translate(105px);
}
.part2{
    height: 50px;
    width: 50px;
    background-color: green;
    display: inline-block;
    
}
.part3{
    height: 0px;
    width: 0px;
    border-top: 50px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 50px solid green;
    display: inline-block;
    transform: translate(-104px);
}