2

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

但它们都有纯色背景。

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

4

2 回答 2

0 
<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 定义 ^^

于 2013-04-30T12:09:45.330 回答
0

@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;
 }

在 jsfiddle

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

于 2013-04-30T19:44:31.973 回答