响应宽度css三角形与梯度

我想要建立一个三角形，其宽度是它的父母的100％。父元素将位于三列中，并且会有响应。我通过制作纯色三角形并在其顶部放置透明渐变来完成了渐变部分。问题是，用这种方法，我需要为三角形的宽度设置一个特定的数字。这是我使用了三角形响应宽度css三角形与梯度

width: 0; 
height: 0; 
border-style: solid; 
border-width: 0 0 40px 300px; 
border-color: transparent transparent red transparent;

我一直没能找到一种方法，使三角形是父容器的100％宽度的方法。

最终目标是三角形将具有变体高度，具体取决于正在查看的产品，但始终为父容器的100％宽度。这是我迄今为止设置的一个例子。

http://codepen.io/anon/pen/vOpQYo

来源

2015-06-29 user2339729

http://jsfiddle.net/josedvq/3HG6d/ – aahhaa

有趣的方式来做到三角形。但我不太确定如何使它成为父容器的100％宽度和变体高度。看起来这些显示更少的是一个巨大的三角形。 – user2339729

你可以让一个坚实的红色三角形的梯度也。如果角度是用关键字指定的，这将会有响应。而在它的上面，黑/透明渐变

#test1 { 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#test2 { 
 
    width: 400px; 
 
    height: 200px; 
 
} 
 
#test3 { 
 
    width: 300px; 
 
    height: 100px; 
 
} 
 
.test { 
 
    display: inline-block; 
 
    background-image: linear-gradient(90deg, black, transparent), linear-gradient(to top left, red 50%, black 50%); 
 
    }

<div class="test" id="test1"></div> 
 
<div class="test" id="test2"></div> 
 
<div class="test" id="test3"></div>

来源

2015-06-29 20:59:11 vals

这工作相当不错，但似乎是非常像素化。 – user2339729

响应宽度css三角形与梯度

回答

相关问题