具有边界半径和框阴影的CSS剪切路径

Question

我正在尝试以响应方式对该卡进行编码，但无法使其正常工作。

我还尝试将导出的SVG用作背景和：before元素，但是对于动态内容高度来说，这并不是很好。

然后我尝试了CSS剪切路径，但是无法获得圆角边框和轻微的盒子阴影。

这是代码：

.shaped-card {
  width: 20%;
  padding: 1em 2em;
  position: relative;
  background: #FBF2E2;
  -webkit-clip-path: url(#clipped);
  clip-path: url(#clipped)
}

<div class="shaped-card">
  <h2>Awesome headline</h2>
  <p>The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!</p>
</div>

<!-- SVG use for clip-path reference -->
<svg xmlns="http://www.w3.org/2000/svg" width="474.949" height="508.807" viewBox="0 0 474.949 508.807">
      <clipPath id="clipped"><path id="Path_64" data-name="Path 64" d="M6.323,508.807h462.3c3.492,0,6.323-4.324,6.323-9.658V9.658c0-5.334-2.831-9.658-6.323-9.658L6.323,41.518C2.831,41.518,0,45.842,0,51.177V499.148C0,504.482,2.831,508.807,6.323,508.807Z" transform="translate(474.949 508.807) rotate(180)" fill="none"/>
      </clipPath>
    </svg>

Answer 1

如果您使用svg，请使其大小与元素大小匹配，但是box-shadow在与clip-path断开时将不会显示。

您可以做的是在透明父级中使用filter，请参见drop-shadow：

可能的示例：

.shaped-card {
  width: 475px;
  height:510px;
  padding: 1em 2em;
  position: relative;
  background:tomato;
  -webkit-clip-path: url(#clipped);
  clip-path: url(#clipped);
  }
  section {
  filter:drop-shadow(0 0  5px #000);
}
svg {
position:absolute;right:100vw;
}

<svg xmlns="http://www.w3.org/2000/svg" width="474.949" height="508.807" viewBox="0 0 474.949 508.807">
  <clipPath id="clipped"><path id="Path_64" data-name="Path 64" d="M6.323,508.807h462.3c3.492,0,6.323-4.324,6.323-9.658V9.658c0-5.334-2.831-9.658-6.323-9.658L6.323,41.518C2.831,41.518,0,45.842,0,51.177V499.148C0,504.482,2.831,508.807,6.323,508.807Z" transform="translate(474.949 508.807) rotate(180)" fill="none"/>
  </clipPath>
</svg>
<section>
<div class="shaped-card">
  <h2>Awesome headline</h2>
  <p>The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!</p>
</div>
</section>

Answer 2

一种更简单的方法是使用skewY，其背景颜色和边框半径如下：

.shaped-card {
    width: 20%;
    padding: 1em 2em;
    position: relative;
    border-radius: 10px;
    margin-bottom: 100px;
    background: #FBF2E2;
}
.shaped-card::before {
    border-radius: 10px;
    margin-bottom: 100px;
    box-shadow: 6px 6px 24px rgba(0,0,0,0.16);
    content: "";
    width: 100%;
    height: 60px;
    z-index: -1;
    left: 0;
    top: 0;
    position: absolute;
}
.shaped-card::after {
    content: "";
    position: absolute;
    background: #FBF2E2;
    transform: skewY(10deg);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    top: 50px;
    left: 0;
    z-index: -1;
    box-shadow: 6px 6px 24px rgba(0,0,0,0.16);
}

<div class="shaped-card">
  <h2>Awesome headline</h2>
  <p>The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!</p>
</div>