用CSS写梯形的方法

发布时间：2023-12-16 03:15:28 所属栏目：语言来源：DaWei

导读： 这篇文章给大家分享的是用CSS写梯形的思路和方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

这篇文章给大家分享的是用CSS写梯形的思路和方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

这意味着，我们要用一个‘方形’和两个三角形来拼接成一个梯形，这么一说大家的思路是不是豁然开朗了，方形好实现，那么三角形怎么实现？下面我们来看看三角形的实现方法：

1，首先，我创建了一个 class 名为 ‘box’ 的div，我们暂且亲切的称它为‘小盒子’

　　html：

<div class='box'></div>
　　css：


.box
{
width:20px;
height:20px;
background-color:blue;
}

2，然后，我们给‘小盒子’添加四条边框样式，边框设置的宽一点，四条边框的颜色给不一样的值，方便我们查看，

.box
{
width:50px;
height:50px;
background-color:blue;

border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}

3，然后，我们把‘小盒子’的宽高设置为0px，去掉蓝色的背景色，当然就只剩下四周的边框了，脑补一下，然后我们上代码，看一下效果。

.box
{
width:0px;
height:0px;

border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}

4，假设我们想要一个向上的三角形，只要把‘小盒子’上、右、左方向边框的颜色设置为透明，就只剩下下边框，也就是向上的小三角了，来上代码，look一下！

.box
{
width:0px;
height:0px;

border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0);
}

通过上面的操作，我们已经成功的用css 做出了小三角形，是不是很简单。

介绍到这里，我们已经用css 把梯形做出来了，还有其他的图形，比如平行四边形等，类似的东西，举一反三，都可以通过这种方法做出来，在这里我就不一一介绍了。最后，祝大家学习愉快。

（编辑：汉中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!