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

Question

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

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

Answer 1

看看这里，小提琴！您可以只填充渐变，然后调整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 演示，使用@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 及更早版本。