div 实现梯形

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

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

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

web 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用CSS实现梯形效果的方法。通过设置绝对定位和透视变换，可以使元素呈现梯形外观，同时保持内部文字不变形。文章提供了两种实现方案，并详细解释了使用的CSS属性。

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

梯形的实现：


 - <div class="front_div">
        <div class="transform_div"></div>
        <div class="box">
                内容  部分              
        </div>
   </div> ```
对应css
.transform_div{position: absolute; width: 100%; height: 100%; transform: perspective(244px) rotateX(-5deg);background: -webkit-gradient(linear,0 0,0 bottom, from(rgba(255,140,17,0.7)),to(#ff8c11)); border-radius: 6px;}


或者： 

<div class="front_div"></div>
.front_div{
            position: relative;
            display: inline-block;
            padding: .5em 1em .35em;
            color: white;
        }
.front_div::before {
            content: '';
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            background: #58a;
            transform: perspective(.5em) rotateX(-5deg);
            background: -webkit-gradient(linear,0 0,0 bottom, from(#7abeec),to(#56abe4));;
        }

注释： front_div 是最外层div transform_div是变形的div 即梯形div box 为内容div .
因为如果把内容放到transform里面内容也会变形所以用定位使两个div重合既能显示梯形又能像是内容主要用了透视属性： perspective 和旋转： rotatex()