边境离开梯度

Question

这是我的CSS：

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

是否有可能使左边框有梯度？

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

Answer 3

Here is Jsfiddle Demo

有，因为它仅支持Chrome和Firefox没有跨浏览器CSS的解决方案。所以，我建议使用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; 
}