Html 向带边框的div添加角点

我需要重新创建一个响应（最好不是精灵）版本的

我已经创建了，但我不知道如何添加图像右侧的45度角。有人知道怎么做吗

---

//编辑：许多人将内容链接到“粘贴外观”或“css箭头”。我知道如何同时做这两件事，但我需要将它们结合起来，这是最难的部分。

你可以很快完成这些形状，请参见下面的代码。最硬的部分是虚线；您可能必须要么避免它们消失，要么使它们成为重复的边界模式。您可以将背景用作重复模式，不用担心

请参阅此代码：

.rectangle{
背景：绿色；
位置：相对位置；
宽度：80%；
高度：120px；
}
.向右箭头{
位置：绝对位置；
右：-60px；
宽度：0；
身高：0；
边框顶部：60px实心透明；
边框底部：60px实心透明；
左边框：60px纯绿色；
}
.矩形二{
背景：红色；
宽度：80%；
高度：120px；
显示：内联块；
}
.向右箭头2{
显示：内联块；
宽度：0；
身高：0；
边框顶部：60px实心透明；
边框底部：60px实心透明；
左边框：60px实心红色；
}

---

我能想到的最好的方法是如下所示。相应地，这将是困难的，我会使用svg作为边框，这样它会随着框的增长和收缩。您也可以使用clip path而不是svg来剪裁角点，但它在edge 14中不起作用

。拐角截断{
位置：相对位置；
填充：10px；
利润率：10px；
背景颜色：绿色；
边框：3倍白色虚线；
显示：内联块；
高度：500px；
宽度：300px；
盒子阴影：0 0 10px绿色，2px 1px 6px 4px rgba（10,10,0,0.5）；
}
.拐弯处，拐弯处{
位置：绝对位置；
顶部：-11px；
右：19px；
高度：64px；
宽度：1px；
背景颜色：绿色；
左边框：3倍白色虚线；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
}
.角切断svg{
高度：66px；
宽度：66px；
位置：绝对位置；
右：-13px；
顶部：-13px；
}
.角切割svg.图像切割形状{
填充：绿色；
}

我能做的最好的

.wrapper{
位置：相对位置；
显示：内联块；
}
.盒子{
填充：20px；
利润率：10px；
背景：#ff0030；
颜色：#fff；
字号：21px；
字体大小：粗体；
线高：1.3em；
边框顶部：2个虚线#fff；
边框底部：2个虚线#fff；
左边框：2个虚线#fff；
边界半径：10px；
//盒影：0 0 0 4px#ff0030，2px 1px 6px 4px rgba（10,10,0,0.5）；
盒影：-3px 0px 0px 3px#ff0030；
//文本阴影：-1px-1px#aa3030；
字体大小：正常；
宽度：200px；
z指数：1；
位置：相对位置；
}
.三角形{
宽度：34px；
高度：34px；
背景：红色；
颜色：#fff；
字号：21px；
字体大小：粗体；
线高：1.3em；
边框顶部：2个虚线#fff；
右边框：2px虚线#fff；
边界半径：10px；
//盒影：0 0 0 4px#ff0030，2px 1px 6px 4px rgba（10,10,0,0.5）；
//文本阴影：-1px-1px#aa3030；
盒影：0px 0px 0px 3px#ff0030；
字体大小：正常；
位置：绝对位置；
最高：50%；
变换：translateY（-50%）旋转（45度）；
右：0；
z指数：0；
}

尝试搜索

css箭头

-立即检查此项，这就是StackOverflow无效的证据。主要问题可能是在边框中添加背景。背景很简单，边框不是。请查看以下css中的缝合外观：