如何将形状设置为 div

Question

我想为 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>

我想将我的形状 (chevron) 设置为背景，内部元素应该在它上面。

http://jsfiddle.net/45tyb219/2/

Answer 1

您可以使用 CSS 实现此目的，但 SVG 使其更容易实现：

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

<svg viewbox="0 0 100 50">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="50">
      <image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" height="50" width="100" />
    </pattern>
  </defs>
  <path fill="url(#img)" d="M5 0 H95 Q100 0 100 5 V45 L50 50 L0 45 V5 Q0 0 5 0z" />
</svg>

在此演示中，图像设置在 <pattern> 元素中并用于填充使用 <path /> 元素定义的形状。

Answer 2

只需将 position: relative; 和 z-index: 1; 添加到您的 .img - 或者您也可以将 z-index: -1; 添加到 #chevron:after.

#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); }

img {
    position: relative;
    z-index: 1;
}

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

如何将形状设置为 div

how to set a shape to a div

html

css

svg

css-shapes