Question

那是我的css：

width: 0;
height: 0;
border-top: 31px solid transparent;
border-bottom: 31px solid transparent;
border-left: 31px solid #0caa3f;

是否可以使border-left具有渐变？

Answer 1

演示：http://jsfiddle.net/abhitalks/fg7Ex/3/

标记：

<div id="grad"></div>

CSS ：

#grad {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 32px;
    left: 32px;
    clip: rect(auto 30px 60px auto);
}
#grad:after {
    content:'';
    position: absolute;
    background-color: rgba(0, 0, 0, .7);
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: 8px;
    -webkit-transform:rotate(-45deg);
    background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(.75, #52882d), color-stop(0, #eee));
    border: 1px solid #fff;
}

从这里无耻地挑选：https://gist.github.com/distilledhype/582201

Answer 2

您可以在解决方案right border gradient

的stackoverflow中查看相同类型的问题

Answer 3

Here is Jsfiddle Demo

没有跨浏览器的css解决方案，因为它只支持chrome和firefox。所以我建议使用div作为父级并将其指定为css：

.gradient {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(173, 14, 173)), color-stop(0.67, rgb(255, 0, 255)));
    background-image: -moz-linear-gradient(center bottom, rgb(173, 14, 173) 33%, rgb(255, 0, 255) 67%);
    padding: 2px;
}
.gradient > div {
    background: #fff;
}

这里是html：

<div class="gradient">
    <div>text in div</div>
</div>

Answer 4

如何在div的伪元素上使用box-shadow。像

这样的东西

<强> FIDDLE

div:before
{
    content: '';
    display: block;
    height: 60px;
    width: 3px;
    box-shadow: -3px 2px 2px 0 rgba(0,0,0,.5);
    left: -30px;
    top: -31px;
    position: relative;
}

Answer 5

--color:#777;

margin:0 1%;
padding:0 5%;
background:linear-gradient(to right, transparent, var(--color) 5%, transparent 5%, transparent 95%, var(--color) 95%, transparent);

边框左边渐变

5 个答案: