CSS斜边边框角[重复]答案

【问题标题】：CSS Beveled border corners [duplicate]CSS斜边边框角[重复]
【发布时间】：2020-11-08 15:36:00
【问题描述】：

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

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

图片：Border

【问题讨论】：

你能告诉我们你尝试了什么吗？？
我试图在 :after 和 :before 上创建矩形并将其放在角落，但我需要透明，所以这不是我认为的正确方式。

【解决方案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;
}

&lt;div id="border"&gt;SVG to the rescue!&lt;/div&gt;

您可以由此生成 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 颜色。

【讨论】：