在 CSS (HTML) 的顶部边框内居中的徽标（图像）

Question

我有一个

<div>

，顶部和左侧带有红色边框。

border-radius

是：16px 4px 10px 4px

但是在顶部边框上方有一个 svg-image（就像这张照片）。 有没有办法打破/停止某个区域的红色顶部边界？

我可能的解决方案并不是很优雅：

1. 我加了一个

   background-image

2. 我用了

   <fieldset>

   而不是

   <div>

3. 我试过了

   border-image: linear-gradient(to left ,red 25%,transparent 25% 75%,red 0) 1;

   3B）我试过

   border-top-image:

   ...（但CSS不再支持）
4. 我试过这个

但是每个方法都不是很简单/清晰/优雅

Answer 1

你要打断的上边框区域要和你先做的透明图的比例一致。 然后，使用 border-image-source 属性将图片应用到上边框。 您可以通过设置 border-image-slice 属性来指定图像的哪些部分应该用作边框。 然后应将 border-image-width 属性调整为原始边框的宽度。 像这样

div {
  border: 0 solid transparent;
  border-radius: 16px 4px 10px 4px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-image-source: url(transparent-image.png);
  border-image-slice: 4 fill;
  border-image-width: 4px;
}

'border-image-slice'属性设置为4 fill，表示透明图片的上下切片会被拉伸填充边框区域，左右切片会重复。根据需要调整值以达到预期效果。