如何用CSS做一个带网格背景的梯形？

yangtoude
  • 326

问题描述

额，设计出的设计稿在此：

clipboard.png
这是一个顶部的菜单。
可以看到，这里面有梯形和网格背景效果，嗯，网格背景还有渐变效果。

问题出现的环境背景及自己尝试过哪些方法

我看了下《CSS揭秘》，如果只实现其中一种效果，梯形或者网格背景，都可以用CSS3实现，梯形可以用：

transform: perspective(.5em) rotateX(5deg);

网格可以用：

background-image:
  linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 0),
  linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 0);
background-size: 10px 10px;

但是两者结合起来就会出现这个问题：

clipboard.png

上面效果的CSS代码如下

  .title-box {
    width: 40.8%;
    height: 75px;
    position: relative;
  }

  .title-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
    background: #0F2F5B;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 0),
      linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 0);
    background-size: 10px 10px;
  }

另外，我还百度了下其他的梯形实现方法，发现用边框也可以模拟梯形，但是据我所知边框不能设置成网格边框，所以也就没法实现网格背景。
如果用CSS解决不了，我打算用背景图片来作为背景实现，但那样就要考虑在不同屏幕大小下图片的大小问题，这个也算备选方案。

求助

哪位对CSS比较熟的朋友希望给提供给个思路，谢谢。

css
回复
阅读 2.8k
2 个回答
得票最新
zzgzzg00
  • 3.6k
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            --off:20%;
            --line:rgba(255,255,255,.2);
            height: 50px;
            width: 200px;
            background-color: blue;
            background-image: repeating-linear-gradient(90deg,var(--line) 0,var(--line) 1px,transparent 0,transparent 10px),
                                repeating-linear-gradient(0deg,var(--line) 0,var(--line) 1px,transparent 0,transparent 10px);
            clip-path: polygon(0% 0%,100% 0%,calc(100% - var(--off)) 100%,var(--off) 100%);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

这样试试

回复
桃子_Lisa
  • 1.1k

如果不能用楼上的clip-path，那换个思路，左右加个平行四边形的方式（用transform: skewX(15deg)）

做了整个顶部的demo，你试下（特殊边框自己再调哈）

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
  body{
    margin: auto;
  }
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 75px;
    position: relative;
    color: #fff;
    padding-bottom: 10px;
    background-color: pink;
    overflow: hidden;
  }

  .title-box >div{
    height: 100%;
    background: #0F2F5B;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 0),
      linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 0);
    background-size: 10px 10px;
  }

  .title-box::before,  .title-box::after{
    content: '';
    z-index: 99;
    position: absolute;
    top: 0;
    width: 15px;
    height: 75px;
    background-color: pink;
    border: 1px solid #fff;
    border-width: 0 1px;
  }

  .title-box::before{
    left: 30%;
    margin-left: -16px; /*宽度15 加 右边框1px*/
    transform: skewX(15deg);
    transform-origin: right bottom;
  }

  .title-box::after{
    right: 30%;
    margin-right: -16px; /* 宽度15 加 左边框1px*/
    transform: skewX(-15deg);
    transform-origin: left bottom;
  }
  
  .center{
    text-align: center;
    width: 40%;
    border-bottom: 1px solid #fff;
  }
  .left, .right{
    position: relative;
    width: 30%;
  }

  .left {
    text-align: left;
  }

  .right{
    text-align: right;
  }

  .left::after, .right::after{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15px;
    background-color: pink;
    border-top: 1px solid #fff;
    z-index: 999;

  }

  .left::after{
    left: -17px; /* 宽度15 加上左右边框各1px */
    transform: skewX(15deg);
  }

  .right::after{
    right: -17px; /* 宽度15 加上左右边框各1px */
    transform: skewX(-15deg);
   }
  </style>
</head>

<body>
  <div class="title-box">
    <div class="left">左边</div>
    <div class="center">中间</div>
    <div class="right">右边</div>
  </div>
</body>
</html>
回复
撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
宣传栏
2803