How to use CSS to make a trapezoid with grid background?

problem description

Uh, the design draft is here:

clipboard.png

CSSCSS3:

:

:

clipboard.png

the CSS code for the above effect is as follows 

  .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: -sharp0F2F5B;
    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;
  }

in addition, I have also discussed other trapezoid implementation methods of Baidu, and found that trapezoids can also be simulated with borders, but as far as I know, the border cannot be set as a grid border, so it is impossible to realize the grid background.
if you can"t solve it with CSS, I"m going to use the background image as the background implementation, but then you have to consider the size of the image under different screen sizes, which is also an alternative.

ask for help

anyone who is familiar with CSS would like to give us some ideas. Thank you.

Css
Jul.15,2021 
<!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>

try this

if you can't change your way of thinking with the clip-path, upstairs, add a parallelogram to the left and right (using transform: skewX (15deg)

do the whole top demo, you try (adjust the special frame by yourself) 

<!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: -sharpfff;
    padding-bottom: 10px;
    background-color: pink;
    overflow: hidden;
  }

  .title-box >div{
    height: 100%;
    background: -sharp0F2F5B;
    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 -sharpfff;
    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 -sharpfff;
  }
  .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 -sharpfff;
    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>

Previous: An interview question about valueOf's JavaScript

Next: IOS reflection according to the operation on the Internet is not successful, what to do?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu