css - CSS斜边边框角

Question

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

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

图片：边框

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>

You can generate the SVG data: URI from this:

'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,''))

Tweak the fill colour as desired.