Html 如何将形状设置为div

我想将形状设置为

div

标记。一切正常，但当我在该形状内设置

img

标记时，它显示不好

我的CSS代码：

#chevron{
  width: 350px;
  height: 100px;
  background: #337AB7;
  border-radius: 10px 10px 0 0;
  position: relative;
}
#chevron:before { 
  content: ''; 
  position: absolute;
  top: 20px; 
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);    -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg); }

#chevron:after { 
  content: ''; 
  position: absolute;
  top: 20px; 
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }

我的html文件：

<div id="chevron">
  <img  src="http://i.stack.imgur.com/HtYUn.jpg" style="width:120px;height:120px"/>
</div>

我想将我的形状（

雪佛龙

）设置为背景，内部元素应位于其上方

---

您可以通过CSS实现这一点，但SVG使之更容易：

svg{width:50%；display:block；margin:0 auto；}

---

您可以通过CSS实现这一点，但SVG使之更容易：

svg{width:50%；display:block；margin:0 auto；}

---

只需添加

位置：相对和
z指数：1
到您的
.img
-或者您也可以添加
z-index:-1至
#V形：在
之后


#雪佛龙{
宽度：350px；
高度：100px；
背景#337AB7；
边界半径：10px 10px 0；
位置：相对位置；
}
#雪佛龙：在{
内容：''；
位置：绝对位置；
顶部：20px；
左：0；
身高：100%；
宽度：51%；
背景#337AB7；
-webkit变换：倾斜（0度，6度）；-moz变换：倾斜（0度，6度）；
-ms变换：倾斜（0度，6度）；
-o变换：倾斜（0度，6度）；
变换：倾斜（0度，6度）；}
#雪佛龙：在{
内容：''；
位置：绝对位置；
顶部：20px；
右：0；
身高：100%；
宽度：50%；
背景#337AB7；
-webkit变换：倾斜（0deg，-6deg）；-moz变换：倾斜（0deg，-6deg）；-ms变换：倾斜（0deg，-6deg）；-o变换：倾斜（0deg，-6deg）；变换：倾斜（0deg，-6deg）；}
img{
位置：相对位置；
z指数：1；
}
只需添加
位置：相对和
z指数：1
到您的
.img
-或者您也可以添加
z-index:-1至
#V形：在
之后


#雪佛龙{
宽度：350px；
高度：100px；
背景#337AB7；
边界半径：10px 10px 0；
位置：相对位置；
}
#雪佛龙：在{
内容：''；
位置：绝对位置；
顶部：20px；
左：0；
身高：100%；
宽度：51%；
背景#337AB7；
-webkit变换：倾斜（0度，6度）；-moz变换：倾斜（0度，6度）；
-ms变换：倾斜（0度，6度）；
-o变换：倾斜（0度，6度）；
变换：倾斜（0度，6度）；}
#雪佛龙：在{
内容：''；
位置：绝对位置；
顶部：20px；
右：0；
身高：100%；
宽度：50%；
背景#337AB7；
-webkit变换：倾斜（0deg，-6deg）；-moz变换：倾斜（0deg，-6deg）；-ms变换：倾斜（0deg，-6deg）；-o变换：倾斜（0deg，-6deg）；变换：倾斜（0deg，-6deg）；}
img{
位置：相对位置；
z指数：1；
}

plz检查它：
Ah我明白了，添加
z-index:1到图像或添加
z-index:-1到
雪佛龙：在
之后请检查它：
啊，我明白了，添加
z-index:1到图像或添加
z-index:-1至<代码>V形：在