梯形形状，顶部和右侧成角度

Question

基本上是一个弯曲的div：

那么有可能只使用CSS而没有图像吗？

Answer 1

好吧...我是这种形状的最大怀疑者，但似乎O_o

演示

HTML

<div class="shape one"></div>
<div class="shape two"></div>
<div class="shape three"></div>

CSS

.shape
{
    background:red;
    float:left;
}

.one
{
    border-width:0px;
    border-bottom:10px solid red;
    border-left:200px solid #fff;
    width:0px;
}

.two
{
    width:200px;
    height:40px;
    clear:left;
}

.three
{
    border-width:0px;
    border-top:50px solid red;
    border-right:10px solid #fff;
    width:0px;
    margin-top:-10px;
}

Answer 2

在我测试的浏览器中， border方法看起来很粗糙。 这是使用::before和::after伪元素以及CSS transform: skew()看起来更平滑。 您可以根据需要调整角度。 这仅使用一个<div> 。

演示：

输出：

HTML：

<div class="quadrilateral"></div>

CSS：

.quadrilateral {
    background-color: red;
    height: 50px;
    margin: 50px;
    position: relative;
    width: 300px;
}
.quadrilateral::before {
    background-color: red;
    content: '';
    display: inline-block;
    height: 61px;
    position: absolute;
    right: -3px;
    top: -11px;
    transform:             skewX( -5deg ); 
        -ms-transform:     skewX( -5deg ); 
        -webkit-transform: skewX( -5deg ); 
        -o-transform:      skewX( -5deg ); 
        -moz-transform:    skewX( -5deg ); 
    width: 10px;
}
.quadrilateral::after {
    background-color: red;
    content: '';
    display: inline-block;
    height: 15px;
    position: absolute;
    top: -6px;
    transform:             skewY( -2deg ); 
        -ms-transform:     skewY( -2deg ); 
        -webkit-transform: skewY( -2deg ); 
        -o-transform:      skewY( -2deg ); 
        -moz-transform:    skewY( -2deg ); 
    width: 300px;
}

Answer 3

考虑使用SVG代替CSS。 所有主要的浏览器都支持它，并且该形状在SVG格式中将非常小。 它也将在您的DOM树中，因此您可以在其上绑定事件。