css 实现梯形的效果，以及梯形在实际项目中运用

最新推荐文章于 2024-03-04 17:11:12 发布

yunchong_zhao

最新推荐文章于 2024-03-04 17:11:12 发布

阅读量2.9k

点赞数 5

分类专栏：前端 css

本文链接： https://blog.csdn.net/yunchong_zhao/article/details/119834909

版权

前端同时被 2 个专栏收录

342 篇文章 9 订阅

订阅专栏

css

60 篇文章 3 订阅

订阅专栏

有时候，有些简单的图形，我们前端也可以自己画出来，省的ui在给我们切图了，毕竟能用代码实现的就用代码去实现了，那样性能也会好点呢。
毕竟几行代码能实现的再用图片其实没必要的。

其实有一个就是实现梯形的效果
在这里插入图片描述
其实这个看似简单的吧，但也需要你会制作三角形，然后将三角形通过位移或者定位来移动到一个长方形的两侧

组成：中间一个长方形，两侧有两个三角形，依次放到指定位置

 <style>
        div {
            width: 200px;
            height: 50px;
            background-color: #f00;
            position: relative;
        }
        div::before {
            content: '';
            height: 0px;
            width: 0px;
            position: absolute;
            left: -50px;
            top: -50px;
            border-top: 50px solid rgba(0, 0, 0, 0);
            border-left: 50px solid rgba(0, 0, 0, 0);
            border-right: 50px solid rgba(0, 0, 0, 0);
            border-bottom: 50px solid #f00;
        }
        div::after {
            content: '';
            height: 0px;
            width: 0px;
            position: absolute;
            right: -50px;
            top: -50px;
            border-top: 50px solid rgba(0, 0, 0, 0);
            border-left: 50px solid rgba(0, 0, 0, 0);
            border-right: 50px solid rgba(0, 0, 0, 0);
            border-bottom: 50px solid #f00;
        }
</style>

 <div>
</div>

其实主要还是css的掌握呢，html就一个div元素，然后通过伪类生成的

其实这个还有一个比较常见的效果就是
在这里插入图片描述
这个效果还是在实际中还是能运用到了

 <style>
        div.parent {
            margin-left: 100px;
            display: flex;
            width: 500px;
        }
        div.right {
            width: 200px;
            height: 50px;
            background-color: antiquewhite;
            position: relative;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
        }
        div.left {
            width: 150px;
            height: 50px;
            background-color: aquamarine;
            position: relative;
            font-size: 18px;
            text-align: center;
            line-height: 50px;
        }
        div.right::before {
            content: '';
            height: 0px;
            width: 0px;
            position: absolute;
            left: -50px;
            top: -50px;
            border-top: 50px solid rgba(0, 0, 0, 0);
            border-left: 50px solid rgba(0, 0, 0, 0);
            border-right: 50px solid rgba(0, 0, 0, 0);
            border-bottom: 50px solid antiquewhite;
        }
       div.left::after {
            content: '';
            height: 0px;
            width: 0px;
            position: absolute;
            right: -50px;
            top: -50px;
            border-top: 50px solid rgba(0, 0, 0, 0);
            border-left: 50px solid rgba(0, 0, 0, 0);
            border-right: 50px solid rgba(0, 0, 0, 0);
            border-bottom: 50px solid aquamarine;
       }
    </style>

<div class="parent">
        <div class="left">
            你好
        </div>
        <div class="right">
            javascript
        </div>
    </div>