梯形顶部和右侧有角度

Question

它基本上是一个弯曲的div：

所以可以只用CSS而不用图像吗？

Answer 1

嗯......我是这种形状最大的怀疑论者，但似乎有可能是O_o

Demo

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树中，因此您可以绑定它上面的事件。