动态创建带渐变的箭头

Question

动态创建带渐变的箭头

3

如何通过CSS3动态生成这样的形状：

enter image description here

忽略边框，重要的方面包括：

- The gradient in the arrow body, and that the gradient lasts from the tip to the end of the arrow.
- The length of the square part will vary.

我尝试了正常的 :after 方法将三角形添加到 div 元素的末尾，但无法正确地让渐变跨越尖端和主体部分。

示例: http://jsfiddle.net/rtuY9/8/

- KMN

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zoltan Toth · Accepted Answer

您可以尝试这样做 - 演示。此链接提供了相关的IT技术信息示例，希望对您有所帮助。

div {
    width: 50px;
    height: 100px;
    position: relative;
    margin: 100px;

    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 100%);
    background:    -moz-linear-gradient(top, #1e5799 0%, #2989d8 100%);
}

div:after {
    z-index: -1;
    content: "";
    display: block;
    position: absolute;
    left: -125px;
    top: -51px;
    margin: 100px;
    height: 100px;
    width: 100px;
    background: #c00;

    -webkit-transform:rotate( -45deg );
       -moz-transform:rotate( -45deg );
            transform:rotate( -45deg );

    background: -webkit-linear-gradient(45deg, #1e5799 0%, #2989d8 50%, #ffffff 50%, #ffffff 100%);
    background:    -moz-linear-gradient(45deg, #1e5799 0%, #2989d8 50%, #ffffff 50%, #ffffff 100%);
}