How can I do Responsive Rectangular trapezoid figure - CSS

Question

Would like the responsive rectangular trapezoid figure to fit the screen at all times without white borders and that when it reaches mobile, it becomes a rectangle as a bar.

Rectangular trapezoid

Figure: Bar

When you reduce the rectangular trapezoid it becomes small and should fit the screen

 <body>
        <div>
            <img src="https://picsum.photos/300" alt="">

            <span class="before"> </span>
            <span class="after"> </span>
        </div>    
 </body>
   
 <style>

    
    div {
        display: block;
        z-index: 1;
        position: relative;
        /* custom sizes */
        width: 30vw;
        height: 50vw;
        top: -14px; 
        background-color: #9a9ebe;
    }
    
    div .before,
    div .after {
        position: absolute;
        top: 0;
        width:50vw; 
        bottom: 0;
        z-index: -1;
        border-radius: 2px;
        background-color:#9a9ebe;
    }
    
    div .before {
        transform: skew(-15deg);

    }
    
    div .after {
        transform: skew(  2deg);
        right: 15vw;
    }



    img{
    position: absolute;
        margin-top: 290px;
        margin-left: 10vw;
        width: 20vw;
 }

</style>

indyteo · Answer 1 · 2023-02-26T03:17:56.060

I tried to adapt your code to your needs but I eventually ended up rewriting it from scratch. Let's see it and then I'll do a break-through to explain each part:

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#parent {
  width: 100%;
}

.bar {
  background-color: #9a9ebe;
  padding: 25px 5vw 25px 0;
  width: 50%;
  transform: skew(-15deg);
}

.bar::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: inherit;
  width: 50%;
  transform: skew(15deg);
}

.image {
  display: block;
  margin: auto;
  max-width: 300px;
  width: 100%;
  transform: skew(15deg);
}

@media screen and (max-width: 825px) {
  .bar {
    transform: none;
    padding: 25px;
    width: 100%;
  }
  .bar::before {
    display: none;
  }
  .image {
    transform: none;
  }
}

<body>
  <div id="parent">
    <div class="bar">
      <img class="image" src="https://picsum.photos/300" alt="" />
    </div>
  </div>
</body>

Do not hesitate to open the snippet in full page and resize it!

How it works:

The global box-sizing: border-box; style is here to provide a logic interpretation of sizes. See more
I remove the "white borders you mentioned" with the margin: 0; style.
I set the with of the parent to 100% just to be sure it fill all the width of the screen.
The .bar element is the container of the image, with by default 50% width and some padding to ensure the correct position of the image inside.
Because we want to see the skew effect only on the right part, I cover the left part using the ::before element.
The inner content needs to have the inverse transformation so it is not skewed.
To allow responsive style to change, I used a @media rule to remove the skew effect and make the container fill 100% of the width instead. I revert the other styles as well because they are not necessary anymore in this view.

How can I do Responsive Rectangular trapezoid figure - CSS

1 Answers1