使用线性渐变的CSS3三角形 | 使用线性渐变的CSS3三角形

本文介绍了使用线性渐变的CSS3三角形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要在一边创建带有三角形的按钮（例如这个 http://css-tricks.com/triangle-breadcrumbs/ ），使用线性垂直渐变和边框，我想使用纯CSS3。
如果我需要45deg的三角形，我只要这样写这样就可以了。

  .button：after {
 -webkit-transform：rotate（45deg）; 
 background：-webkit-linear-gradient（-45deg，#fff，＃000）; 
 content：''; 
 width：2em; 
 height：2em; 
 display：block; 
}

并隐藏伪元素的一半。它是可见的，像一个三角形）。

但如果我需要另一个角度（例如更陡峭） - 我不能使它与标准XY旋转和缩放。我可以使用2个div，一个用于三角形的上半部分，一个用于底部，但边框和渐变可能有问题。

也许可以使用多个渐变颜色停止？

解决方案

我希望这将帮助你使梯度三角形只有一个div与纯CSS。 >

UPDATED

立即检查其工作方式： -

I need to create button with triangle on one side (like this http://css-tricks.com/triangle-breadcrumbs/) with linear vertical gradient and border, and I want to use pure CSS3.It's ok if I need 45deg "triangle", I just write smth like this

.button:after {
    -webkit-transform: rotate(45deg);
    background: -webkit-linear-gradient(-45deg, #fff, #000);
    content: '';
    width: 2em;
    height: 2em;
    display: block;
}

and hide half of that pseudo-element under .button (so only another half of it is visible, like a triangle).

But if I need another angle (e.g. more steep) - I can't make it with standart XY rotate and scale. I can use e.g. 2 divs, one for top half of triangle and one for bottom, but there might be a problem with border and gradient.

Maybe it's possible to do that with multiple gradients with color stops?

解决方案

I hope this will help you i have made gradient triangle with only one div with pure css.

http://jsfiddle.net/NDJ3S/15/

UPDATED

Check it now its working :- http://jsfiddle.net/NDJ3S/17/

这篇关于使用线性渐变的CSS3三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！