Search code examples
csscss-shapes

how to draw a trapezoid-like card?

Here is the final effect.

final effect

I tried it, but I don’t know how to proceed.

I hope to get some hints to help me to proceed.

I have now added some code to make it look more like it. But it still looks a little imperfect.

Can you see the result below.

I spent a lot of divs to combine them, but the rounded corners do not look very smooth

.block {
      position: relative;
    }
    .block-shapes {
      position: relative;
      display: flex;
    }

    .block-shape {
      position: absolute;
      height: 30px;
      width: 50%;
      top: 0;
    }
    .block-shape__left {
      left: 0;
      border-radius: 40px 40px 0 0 / 30px 30px 0 0;
      background-color: #eee;
    }
    .block-shape__right {
      right: 0;
      margin-top: 30px;
      border-radius: 0 0 40px 40px / 0 0 30px 30px;
      background-color: #fff;
    }

    .block-fills {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

    .block-fill {
      position: absolute;
      top: 0;
      box-sizing: border-box;
    }

    .block-fill__left {
      left: 0;
      width: 50%;
      height: 90px;
      background-color: #eee;
      border-radius: 40px 40px 0 0 / 30px 30px 0 0;
    }

    .block-fill__right {
      right: 0;
      margin-top: 30px;
      width: 50%;
      height: 60px;
      background: linear-gradient(to right, #eee, #fff);
      border-radius: 0 40px 0 0 / 0 30px 0 0;
    }
    

    .block-content {
      position: relative;
      z-index: 3;
      height: 300px;
      background-color: #eee;
      margin-top: 60px;
      border-radius: 0 30px 30px 30px;
    }
<div class="block">
    
  <div class="block-fills">
    <div class="block-fill block-fill__left"></div>
    <div class="block-fill block-fill__right"></div>
  </div>

  <div class="block-shapes">
    <div class="block-shape block-shape__left"></div>
    <div class="block-shape block-shape__right"></div>
  </div>


  <div class="block-content"></div>
</div>

Solution

  • Here is an idea using one element and pseudo element with a small SVG filter to round the edges:

    .box {
  width: 250px;
  height: 150px;
  margin:50px 20px;
  position: relative;
  background: red;
  filter: url('#goo')
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  height: 30px;
  width: 25%;
  background: inherit;
}

.bottom:before {
  top: 100%;
  right: 0;
}
.bottom:after {
  top: 100%;
  left:50%;
  border-radius:0 0 0 20px;
  transform-origin:top;
  transform:skew(8deg);
}

.top:before {
  bottom: 100%;
  left: 0;
}
.top:after {
  bottom: 100%;
  right:50%;
  border-radius:0 20px 0 0;
  transform-origin:bottom;
  transform:skew(8deg);
}
    <div class="box bottom"></div>
<div class="box top"></div>



<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

    Similar question where I used the same filter: border radius for a clip path having border created from shadow