如何使用CSS来实现这个边框效果

Question

第一：

资源背景图

• （PNG）：https://i.imgur.com/pyYfyit.png
• （SVG）：https://jmp.sh/s/emDkCSycZ7dfNoAOODAb

第二个效果（蓝色部分宽度不确定）：

资源背景图

• （PNG）：https://i.imgur.com/hEWGrq6.png
• （SVG）：https://jmp.sh/xMrOnten

我是 CSS 菜鸟，对我的英语感到抱歉。

我不知道如何剪切图像。

如何实现？剪辑路径？背景图像？还是其他？

Answer 1

如果你是 CSS 菜鸟，那么我的主要建议是：“在你更多地了解 CSS 的优点和缺点之前，不要尝试如此复杂的设计”。

但是，这种效果有望通过混合边距和背景图像来生成。我创建了这个 codepen 来帮助您入门。

您必须自己创建背景图像。第一个应该是左上角。另一个应该用于右下角，并且还可以处理第二个项目的右上角圆角效果。如果

.appendix

不能有固定的宽度，事情会变得有点复杂。

其他角落将由

border-radius

处理。