css实现梯形

最新推荐文章于 2024-05-23 16:14:34 发布

Spider--Man

最新推荐文章于 2024-05-23 16:14:34 发布

阅读量7.2k

点赞数 2

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/wojiong132/article/details/66972023

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用伪元素before和after分别在矩形元素前后加三角形或者直接设置border
使用3d旋转矩形，使之看起来像矩形

<html>
  <head>
    <meta charset="utf-8">
    <style>
      .trapezoid-0{
        border-bottom: 100px solid #fb3;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
        margin: 0 0 20px 0;
      }
      .trapezoid-1{
        border-radius: .5em .5em 0 0;
        margin: 20px;
        height: 40px;
        width: 100px;
        background: #fb3;
        transform-origin: bottom;
        transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
         /*scaleY: 纵轴放大1.3倍，使梯形高度等于height；perspective:3d透视效果，元素距离视图的距离*/
      }
    </style>
  </head>
  <body>
      <div class="trapezoid-0"></div>
      <div class="trapezoid-1"></div>
  </body>
</html>

这里写图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Spider--Man

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
css实现梯形

使用伪元素before和after分别在矩形元素前后加三角形或者直接设置border使用3d旋转矩形，使之看起来像矩形<html> <head> <meta charset="utf-8"> <style> .trapezoid-0{ border-bottom: 100px solid #fb3; border-left: 50p
复制链接

扫一扫