在css中创建自适应四边形梯形

是否可以在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; 
}

来源

2015-05-14 Jere.me

你可以看看[这里]（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

你可以用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

来源

2015-05-14 07:51:49 Vandervals

谢谢！这正是我所期待的。 –

在css中创建自适应四边形梯形

回答

相关问题