带渐变的简单 css 三角形答案

【问题标题】：simple css triangle with gradient带渐变的简单 css 三角形
【发布时间】：2013-04-30 11:43:50
【问题描述】：

我找到了很多方法来用这样的 css 制作三角形，

.arrow { position:relative; width: 130px; }
.triangle-left {
border-color: transparent green transparent transparent;
border-style: solid;
border-width: 20px;
width: 0;
height: 0;
float: left;
}
.triangle-right {
border-color: transparent transparent transparent green;
border-style: solid;
border-width: 20px;
width: 0;
height: 0;
float: right;
}
.tail { width: 20px; height: 10px; position: absolute; background-color: green }
.tail.left-arrow { left: 40px; top: 15px }
.tail.right-arrow { right: 40px; top: 15px }

http://jsfiddle.net/apdms/

但它们都有纯色背景。

有没有办法用渐变（和透明背景）制作一个简单的三角形？

【问题讨论】：

使用此代码，您可以用渐变图像填充边框，这最终比仅使用图像更复杂。你可以使用svg。见下文！

标签： css

【解决方案1】：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100" height="100"
     viewBox="0 0 100 100"
     version="1.1">
    <title>triangle</title>
    <defs>
      <linearGradient y2="1" x2="1" y1="0" x1="0" id="flame">
       <stop stop-color="#ff0000" offset="0"/>
       <stop stop-color="#ffff00" offset="1"/>
      </linearGradient>
    </defs>
    <path id="triangle" d="m0,0l100,50l-100,50l0,-100z" stroke-width="0" stroke="none" fill="url(#flame)"/>
</svg>

您可以将 svg 标记放入 html。您可以测试 inline-svg 是否可以从 html 共享相同的 css 定义 ^^

【讨论】：

【解决方案2】：

@coldelio，感谢您的回答，虽然它有效，这不正是我想要的：我一直在寻找一种纯 css 的方式来做到这一点，我想我已经找到了（仅适用于 -webkit）

.arrow{
width:20px;
height:40px;
overflow:hidden;
float:left;
 }
 .gradient-triangle {
    width: 40px;
    height: 40px;
    position: relative;
    clip: rect(auto 30px 60px auto);
 }

 .gradient-triangle:after  {
    content: '';
    position: absolute;
    background-color: rgba(0,0,0, .7);
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: 8px;
    -webkit-transform:rotate(-45deg);
    background-image: -webkit-gradient(
            linear,right bottom,left bottom,
            color-stop(.75, #52882d),
            color-stop(0,  #eee)
    );
    border: 1px solid #fff;
 }

in jsfiddle

这是我在这里的第一篇文章 :) 所以如果你正在阅读这篇文章，我希望这段代码对你有所帮助..

【讨论】：

在小提琴中它看起来很像一个矩形：)
@JamieHutber 显然它只适用于 webkit/blink。很可能是因为它使用了旧的和已弃用的 -webkit 线性渐变语法。（并且缺少transform 的其他前缀）。