如何設置形狀爲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

只需添加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>

Answer 2

你可以用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 />元素定義的形狀。