带有边框半径和框阴影的 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>