在CSS3中创建带有倾斜边的渐变条

Question

我正在尝试创建这个渐变填充框，在CSS中有一个倾斜的右侧并且失败。这可能吗？

盒子需要坐在图像上，所以直角需要透明度。

Answer 1

选中此项here, fiddle!您只需填写渐变，然后调整border-right和border-left值以及left值以调整其形状角。

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 demo，使用@ 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及更早版本无效。