如何绘制梯形卡? [英] how to draw a trapezoid-like card?

问题描述

这是最终效果.

我尝试过，但是我不知道如何进行.

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.

我花了很多div来组合它们，但是圆角看起来并不十分光滑

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>

推荐答案

以下是使用一个元素和一个带有小型SVG滤镜的伪元素对边缘进行倒圆的想法:

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

这篇关于如何绘制梯形卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！