Question

我找到了很多方法用这样的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/

但他们都有纯色背景。

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

Answer 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定义

Answer 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

这是我在这里发表的第一篇文章:) 所以，如果您正在阅读本文，我希望此代码可以帮助您..

简单的css三角形与渐变

2 个答案: