Html 如何用css创建透明箭头

我试图在css中使用after在

div

中创建箭头，但无法按要求创建

这是我尝试创建的示例图像：

这是我创建的，但不确定如何控制箭头的背景色

。折扣标签{
位置：相对位置；
浮动：左；
背景色：rgba（61,97153,0.9）；
字体大小：16px；
颜色：#fff；
文本转换：大写；
填充：7px 22px 7px 10px；
}
.折扣标签：之后{
右：0；
最高：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
右边框颜色：#106199；
边框宽度：17px；
利润上限：-17px；
}

---

10%折扣

尝试使用两个箭头部分。设置一个在

：在
之前，一个在
：在
之后


。折扣标签{
位置：相对位置；
浮动：左；
背景色：rgba（61,97153,0.9）；
字体大小：16px；
颜色：#fff；
文本转换：大写；
填充：7px 22px 7px 10px；
}
.折扣标签：之前，
.折扣标签：之后{
内容：''；
显示：块；
位置：绝对位置；
右图：-16px；
宽度：0；
身高：0；
边框样式：实心；
}
.折扣标签：之前{
排名：0；
边框宽度：16px 16px 0；
边框颜色：rgba（61,97153,0.9）透明；
}
.折扣标签：之后{
底部：0；
边框宽度：16px 0 0 16px；
边框颜色：透明rgba（61,97153,0.9）；
}
10%折扣
尝试使用两个箭头部分。设置一个在
：在
之前，一个在
：在
之后


。折扣标签{
位置：相对位置；
浮动：左；
背景色：rgba（61,97153,0.9）；
字体大小：16px；
颜色：#fff；
文本转换：大写；
填充：7px 22px 7px 10px；
}
.折扣标签：之前，
.折扣标签：之后{
内容：''；
显示：块；
位置：绝对位置；
右图：-16px；
宽度：0；
身高：0；
边框样式：实心；
}
.折扣标签：之前{
排名：0；
边框宽度：16px 16px 0；
边框颜色：rgba（61,97153,0.9）透明；
}
.折扣标签：之后{
底部：0；
边框宽度：16px 0 0 16px；
边框颜色：透明rgba（61,97153,0.9）；
}
10%折扣
您可以旋转伪标记并使用框阴影绘制父标记的背景

因此，您可以通过箭头看到任何简单或复杂的背景

长方体阴影还允许您绘制边框：


。折扣标签{
位置：相对位置；
浮动：左；
字体大小：16px；
颜色：#fff；
文本转换：大写；
填充：7px 32px 7px 10px；/*更新*/
溢出：隐藏；/*已添加*/
}
.折扣标签：之前{
右：-21px；/*更新*/
排名：0；
底部：0；/*已添加*/
宽度：34px；/*已添加*/
变换：旋转（45度）；/*添加*/
内容：“；
位置：绝对位置；
z索引：-1；/*已添加*/
指针事件：无；
盒影：0.50vw rgba（61,97153,0.9）/*已添加*/
/*边框：已删除*/
}
身体{
背景：url(http://lorempixel.com/600/800)/*见透明度*/
}
/*需要额外的边界吗*/
.折扣标签：在{
盒影：0.50vw rgba（61,97153,0.9），镶嵌1px-1px白色；
}
.折扣标签{
方框阴影：-1px 1px白色，-1px-1px白色
10%折扣
您可以旋转伪标记并使用框阴影绘制父标记的背景

因此，您可以通过箭头看到任何简单或复杂的背景

长方体阴影还允许您绘制边框：


。折扣标签{
位置：相对位置；
浮动：左；
字体大小：16px；
颜色：#fff；
文本转换：大写；
填充：7px 32px 7px 10px；/*更新*/
溢出：隐藏；/*已添加*/
}
.折扣标签：之前{
右：-21px；/*更新*/
排名：0；
底部：0；/*已添加*/
宽度：34px；/*已添加*/
变换：旋转（45度）；/*添加*/
内容：“；
位置：绝对位置；
z索引：-1；/*已添加*/
指针事件：无；
盒影：0.50vw rgba（61,97153,0.9）/*已添加*/
/*边框：已删除*/
}
身体{
背景：url(http://lorempixel.com/600/800)/*见透明度*/
}
/*需要额外的边界吗*/
.折扣标签：在{
盒影：0.50vw rgba（61,97153,0.9），镶嵌1px-1px白色；
}
.折扣标签{
方框阴影：-1px 1px白色，-1px-1px白色
10%折扣
您可以添加2个伪字符，并将其倾斜以创建箭头的尾部：


。折扣标签{
位置：相对位置；
浮动：左；
背景颜色：蓝色；
字体大小：60px；
颜色：#fff；
文本转换：大写；
填充：7px 22px 7px 10px；
}
.折扣标签：之前，
.折扣标签：之后{
内容：“；
左：0；
右：0；
身高：50%；
位置：绝对位置；
指针事件：无；
背景颜色：蓝色；
z指数：-1；
}
.折扣标签：之前{
排名：0；
变换原点：中心-底部；
变换：skewX（-35度）；
}
.折扣标签：之后{
底部：0；
变换原点：中心-顶部；
变换：skewX（35度）；
}
10%折扣
您可以添加2个伪字符，并将其倾斜以创建箭头的尾部：


。折扣标签{
位置：相对位置；
浮动：左；
背景颜色：蓝色；
字体大小：60px；
颜色：#fff；
文本转换：大写；
填充：7px 22px 7px 10px；
}
.折扣标签：之前，
.折扣标签：之后{
内容：“；
左：0；
右：0；
身高：50%；
位置：绝对位置；
指针事件：无；
背景颜色：蓝色；
z指数：-1；
}
.折扣标签：之前{
排名：0；
变换原点：中心-底部；
变换：skewX（-35度）；
}
.折扣标签：之后{
底部：0；
变换原点：中心-顶部；
变换：skewX（35度）；
}
10%折扣
感谢您的快速回答，但实际上，正如您在示例图像中注意到的，我在这个div后面有一个背景图像，现在右侧区域显示为白色。感谢您的快速回答，但实际上我在这个div后面有一个背景图像，正如您在examp中注意到的