css - 如何放置两个不同的渐变属性

Question

我需要创建一个带有图像 V 的渐变横幅。所以我有这部分给我图像:

background: linear-gradient(45deg, #0000ff 12%,#ffffff 25%,#ff0000 37%);

这部分给我图像/:

background: linear-gradient(-45deg, #0000ff 12%,#ffffff 25%,#ff0000 37%);

所以我尝试了这个:

background: linear-gradient(45deg,  #0000ff 12%,#ffffff 25%,#ff0000 37%),
linear-gradient(-45deg, #0000ff 12%,#ffffff 25%,#ff0000 37%);

我期待图像 V​​ 但我没有唯一的图像。

我哪里错了？

谢谢

编辑:我想要这个输出。是否可以？ http://s18.postimg.org/cx5y2jtgp/image.png

Answer 1

正如@Harry 在评论中提到的，顶层与底层重叠。

让顶层变为透明而不是 #ff0000 解决了这个问题:

background: linear-gradient(45deg,  #0000ff 12%,#ffffff 25%,transparent 37%),
linear-gradient(-45deg, #0000ff 12%,#ffffff 25%,#ff0000 37%);