css - 顶部和右侧有角度的梯形

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方法在我测试的浏览器中看起来很粗糙。这是一种使用伪元素和 CSS::before的方法，看起来更流畅。您可以根据需要调整角度。这仅使用一个.::aftertransform: 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 树中，因此您可以在其上绑定事件。