3
是否可以在css中創建圖像形狀?我已經搜索了這個數據,比上週我想承認的還要多,但沒有找到解決方案。在css中創建自適應四邊形梯形
我已經能夠半複製,但還沒有得到所有要求制定。
- 有邊框
- 響應
- 適應內容的高度(以釐米,所以我沒有對文本的量控制)在IE9
一次嘗試我使用了多個剪輯路徑,但在IE中失敗。 jsfiddle
<div class="clip-block">
<div class="clip-wrap">
<p class="clip-css">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
.clip-wrap {
display: inline-block;
clip-path: polygon(0 22%, 120% 0, 120% 100%, 0 78%);
}
的另一種嘗試使用我的SVG剪輯它試圖(它在IE瀏覽器,但無法在所有其他要求(如形狀中的內容))。 another jsfiddle
<svg class="svg-defs">
<defs>
<clipPath id="clipping">
<polygon points="0,50 700,0 700,300 0,250" />
</clipPath>
</defs>
</svg>
<div class="wrapper">
<div class="item--svg-clip-path-svg">
<div class="demo">
<svg width="1000" height="1000">
<image xlink:href="https://placeimg.com/1000/1000/animals" width="1000" height="1000" />
</svg>
</div>
</div>
</div>
.item--svg-clip-path-svg image,
.item--svg-clip-path-html img {
clip-path: url(#clipping);
border: 2px solid red;
}
.svg-defs {
position: absolute;
width: 0;
height: 0;
}
你可以看看[這裏](HTTP://計算器.com/questions/24276968/css-gradient-help-to-create-a-stedted-div/30101253#30101253)或[this](http://stackoverflow.com/questions/30184622/trapezoid-div-in- css)的想法。第二個鏈接中很少有其他線程被鏈接。順便說一下,你是否只需要形狀或圖像中的文字? – Harry