小编典典

三角形箭头的css渐变

css

请看一下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;

}

阅读 794

2020-05-16

共1个答案

小编典典

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

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

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

编辑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>

2020-05-16