CSS 斜边角

Question

我正在尝试制作边框的斜角。我需要实现这一目标，但我不知道如何实现。我试过之前和之后的伪元素，但是在透明之后，它不起作用。

边框为蓝色，背景需要透明

图片：Border

Answer 1

#border {
  border: 8px solid;
  padding: 4px;
  border-image: url('data:image/svg+xml,%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%203%203%22%3E%3Cpolygon%20points%3D%221%2C0%202%2C0%203%2C1%203%2C2%202%2C3%201%2C3%200%2C2%200%2C1%22%20fill%3D%22blue%22%20/%3E%3C/svg%3E') 33%;
  /* fallback: */
  border-color: blue;
  border-radius: 8px;
}

<div id="border">SVG to the rescue!</div>

您可以从中生成 SVG data: URI：

'data:image/svg+xml,'+escape(`
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3">
    <polygon points="1,0 2,0 3,1 3,2 2,3 1,3 0,2 0,1" fill="blue" />
  </svg>
`.replace(/^\s+|\r|\n/gm,''))

根据需要调整 fill 颜色。

CSS 斜边角

CSS Beveled border corners

css

border

css-hack