css - CSS3で角度の付いた側面を持つグラデーションバーを作成します

Question

CSSで右側が斜めになっている、このグラデーションで塗りつぶされたボックスを作成しようとしていますが、失敗します。これは可能ですか？

ボックスは画像の上に配置する必要があるため、直角には透明性が必要です。

Answer 1

ここでこれをチェックしてください、フィドル！グラデーションを入力してから、値とともに値とborder-right値を調整して、角度の形状を調整できます。border-leftleft

HTML：

<div></div>

CSS

div {
    height: 100px;
    width: 300px;
    background: blue;
}
div:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    left: 260px;
    position: absolute;
    border-top: 0px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 101px solid white;  // Make this say red instead of white to see whats going on
    border-left: 50px solid transparent;
}

Answer 2

Jsfiddleデモ、@psuの角度付きコンテンツマスクの提案を使用。テスト済み：IE9 / 10、Firefox、Chrome、Safari、Opera。

この場合、内側のマスクは回転するのではなく傾斜しているため、単純に見えます。

HTML

<div class="main">
    <div class="outer-mask">
        <div class="skewed-mask">
            <div class="gradient"></div>
        </div>
    </div>
</div>

CSS

.main {
    width: 500px;
    height: 200px;
    position: relative;
    background: #ddd url(//upload.wikimedia.org/wikipedia/commons/2/20/Background_repeat_unit.png) repeat-y -10px top;
}
.outer-mask {
    position: absolute;
    left: 75px;
    top: 45px;
    width: 330px;
    height: 110px;
    overflow: hidden;
}
.skewed-mask {
    position: absolute;
    left: -20px;
    top: 0px;
    width: 330px;
    height: 110px;
    overflow: hidden;
    -webkit-transform: skew(-20deg, 0deg);
        -ms-transform: skew(-20deg, 0deg);
         -o-transform: skew(-20deg, 0deg);
            transform: skew(-20deg, 0deg);
}
.gradient {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 330px;
    height: 110px;
    background-color: #234e7b;
    background-image: -webkit-linear-gradient(top, #234e7b, #0d2951);
    background-image:    -moz-linear-gradient(top, #234e7b, #0d2951);
    background-image:     -ms-linear-gradient(top, #234e7b, #0d2951);
    background-image:      -o-linear-gradient(top, #234e7b, #0d2951);
    background-image:         linear-gradient(top, #234e7b, #0d2951);
}

これはIE8以前では機能しないことに注意してください。