用Div+CSS完成一个等腰梯形

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

lelewang123

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

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/lelewang123/article/details/78486159

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何利用CSS的border属性和定位技巧，通过创建一个内部div覆盖部分外部div的三角形区域，来实现等腰梯形的绘制。详细阐述了思路并提供了相应的代码示例。

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

1.思路：等腰梯形实质上是顶点在同一点的两个相似三角形叠加在一起的的非公共部分。我们知道，用CSS很容易地能做出一个三角形，所以同理，做出一个等腰梯形也不是很困难。我们只需要将内部的div水平垂直定位在外部div的内部，然后通过border大法绘出一个三角形，内部div其实并不一定要是一个三角形，因为内部div的主要用途在于覆盖外部三角形的一部分，使之成为一个等腰梯形，所以对外部div来说只需设置它的背景色为白色即可。

2.代码：

    <div class="box">
        <div class="inner"></div>
    </div>

    *{
            padding:0;
            margin:0;
            box-sizing:border-box;
        }
        .box{
            width:0;
            height:0px;
            border:100px solid;
            border-color:transparent transparent red transparent;
            position:relative;
        }
        .inner{
            position:absolute;
            width:80px;
            height:80px;
            left:50%;
            top:50%;
            transform:translateX(-50%) translateY(-50%);
            background:#fff;


        }