css3怎么实现菱形渐变

1、实现菱形渐变，首先需要实现一个菱形，使用了clip-path属性：

.diamond{
	width: 200px;
	height: 200px;
	clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}
<div class="diamond"></div>

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

（推荐学习：CSS视频教程）

2、然后只需要使用linear-gradient属性设置线性渐变背景即可：

.diamond{
	width: 200px;
	height: 200px;
	background-image: linear-gradient(#e66465, #9198e5);
	clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}

3、效果图：