2015-05-14 61 views
3

是否可以在css中創建圖像形狀?我已經搜索了這個數據,比上週我想承認的還要多,但沒有找到解決方案。在css中創建自適應四邊形梯形

enter image description here

我已經能夠半複製,但還沒有得到所有要求制定。

  • 有邊框
  • 響應
  • 適應內容的高度(以釐米,所以我沒有對文本的量控制)在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; 
    } 
    
  • +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

    回答

    2

    你可以用3D變換做到這一點:

    .container{ 
        position: relative; 
        max-width: 300px; 
    perspective: 500px; 
    padding: 20px; 
    } 
    .text{ 
        position: relative; 
        z-index: 2; 
    } 
    .cuadrilateral{ 
        position: absolute; 
        z-index: 1; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        background: #FBB; 
        border: 3px solid #F66; 
        -ms-transform: rotateY(-10deg) translateX(-5px); 
        transform: rotateY(-10deg) translateX(-5px); 
    } 
    

    ,這裏是爲你的筆:http://codepen.io/vandervals/pen/oXxqNX

    +0

    謝謝!這正是我所期待的。 –