三角形箭头的css渐变

三角形箭头的css渐变

您可以以一种简单得多的方式来执行此 *** 作，仅使用一个元素和一个旋转的伪元素（任何支持CSS渐变的浏览器也支持CSS变换和伪元素和成角度的线性渐变。

在Windows上使用当前版本的Chrome，Opera，Firefox，IE。

HTML 只是

<div ></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: '';}

---

编辑2013年1月

4个月后，我有了一个稍微改进的解决方案。这次，将计算值。我第一次使用试错法获得它们。

新演示

.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 ; height: 47px;    transform: rotate(30deg) skewY(30deg);         background: linear-gradient(-49.1deg, #f6f6f6, #e1e1e1 43%, #f1f1f1 63%, white);    content: ''}<div ></div>