Html 如何在包含背景图像的div中设计箭头？

---

如何在包含背景图像的div中添加箭头，如下图所示？

使用以下css，您可以生成带有箭头形状的图像

.wrap{
位置：相对位置；
溢出：隐藏；
宽度：70%；
高度：150像素；
保证金：0自动；
背景色：#fff；
}
.包裹img{
宽度：100%；
高度：自动；
显示：块；
}
.wrap:之前，.wrap:之后{
内容：''；
位置：绝对位置；
右：0；
身高：50%；
背景色：继承；
右：3%；
}
.包装：之前{
底部：50%；
-ms变换原点：100%100%；
-webkit转换来源：100%100%；
变换原点：100%100%；
-ms变换：歪斜（45度）；
-webkit变换：歪斜（45度）；
变换：歪斜（45度）；
}
.包装：之后{
最高：50%；
-ms变换原点：100%0；
-webkit转换来源：100%0；
变换原点：100%0；
-ms变换：歪斜（-45度）；
-webkit变换：歪斜（-45度）；
变换：歪斜（-45度）；
}

---

尝试在主分区上使用相对位置。

右键单击>检查元素。使用：：before并以png格式添加背景img。这将有助于查看您的代码。欢迎使用堆栈溢出！希望您至少尝试自己编写此代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果仍然有问题，请返回代码并解释您尝试了什么。

`   div::before {
               position: absolute;
               content: "";
               border-top: 20px solid transparent;
               border-right: 39px solid transparent;
               border-bottom: 20px solid transparent;
               border-left: 40px solid green;
                 opacity: 0.4 !important;
               }`