三角形箭头的css渐变

  • Z时代
  • 2024-01-10
  • 分类：问答

请看一下http://jsfiddle.net/ghAgQ/我需要与箭头相同的渐变，因为它与矩形相同。有什么想法的吗？谢谢

.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变换和伪元素和成角度的线性渐变。

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

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

相关 ：

.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 /* 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渐变 的全部内容， 来源链接： utcz.com/qa/427268.html

回到顶部