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メソッドはざらざらしているように見えます。::beforeこれは、::after疑似要素と CSSを使用した、transform: skew()より滑らかに見える方法です。必要に応じて角度を調整できます。これは 1 つだけを使用し<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

CSS の代わりに、SVG の使用を検討してください。すべての主要なブラウザーでサポートされており、その形状は SVG 形式では非常に小さくなります。また、DOM ツリーにもあるため、イベントをバインドできます。