css渐变为三角形的箭头 [英] css gradient for triangle shaped arrow

问题描述

请查看 http://jsfiddle.net/ghAgQ/
我需要相同的渐变箭头，因为它是为矩形。任何想法如何做？感谢

Please take a look at http://jsfiddle.net/ghAgQ/ I need the same gradient for arrow, as it is for the rectangle. Any ideas how thats done? Thanks

.rectangle {
background-color: #EEE;
height: 80px;
width: 240px;
border: 1px solid #CCC;
background: white;
cursor: pointer;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white),             color-stop(37%,#F1F1F1), color-stop(57%,#E1E1E1), color-stop(100%,#F6F6F6));
float: left;
}

.arrow {

border-top: 41px solid transparent;
border-bottom: 41px solid transparent;
border-left: 15px solid #C4C4C4;
float: left;
cursor: pointer;

}

推荐答案

只需使用一个元素和一个旋转的伪元素（任何支持CSS渐变的浏览器也支持 CSS transforms 和 伪元素 ）。此外，请不要使用旧的WebKit语法（请参阅此位有关

You can do this in a much simpler way, using just an element and a rotated pseudo element (any browser that supports CSS gradients also supports CSS transforms and pseudo-elements) with an angled linear gradient. Also, don't use the old WebKit syntax (see this bit about the history of the syntax).

在Windows上使用Chrome，Opera，Firefox和IE的最新版本。

Working in current versions of Chrome, Opera, Firefox, IE on Windows.

HTML 只是< div class ='rectangle'>< / div>

相关 CSS ：

.rectangle {
    float: left;
    position: relative;
    height: 80px;
    width: 240px;
    border: solid 1px #ccc;
    border-right: none;
    background: #eee linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
    cursor: pointer;
}
.rectangle:after {
    position: absolute;
    top: 16px; right: -25px;
    width: 48px;
    height: 47px;
    border-left: solid 1px #ccc;
    border-top: solid 1px #ccc;
    transform: rotate(134deg) skewX(-10deg) skewY(-10deg);
    background: #eee linear-gradient(45deg, white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
    content: '';
}

---

h3>

4个月后，我有一个略微改进的解决方案。这一次，计算值。我第一次尝试使用它们。

---

Edit January 2013

4 months later, I have a slightly improved solution. This time, the values are computed. The first time I got them using trial and error.

.shape {
    float: left;
    position: relative;
    border: 1px solid #ccc;
    border-right: none;
    width: 240px; height: 80px;
    background: linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
    cursor: pointer;
}
.shape:after {
    position: absolute;
    top: 50%; right: 0;
    margin: -24px -20px;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    width: 40px /* 80px/2 */; height: 47px/* 80px/sqrt(3) */;
    transform: rotate(30deg) skewY(30deg); /* create a rhombus */
    /* 49.1deg = atan(1.15) = atan(47px/40px) */
    background: 
            linear-gradient(-49.1deg, #f6f6f6, #e1e1e1 43%, #f1f1f1 63%, white);
    content: ''
}

<div class='shape'></div>

这篇关于css渐变为三角形的箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！