时间戳

首页 > 解决方案 > 带有边框半径和框阴影的 CSS 剪辑路径

html - 带有边框半径和框阴影的 CSS 剪辑路径

问题描述

我正在尝试以响应方式对这张卡进行编码，但我无法让它工作。定制卡

我也尝试过使用导出的 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>

标签： htmlcss

解决方案

如果使用 an 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>

推荐阅读