（css）把一个div变成圆左边蓝色 右边绿色

效果图如下：

                                                           

<div></div>

div { width: 300px; height: 300px; /* background:linear-gradient(to right,blue 50%, green 50%); 第一种 利用CSS3渐变*/ border-radius: 150px; transition: all 0.5s; } /* 附加 鼠标放上去圆旋转 */ div:hover { transform: rotate(360deg) } /* 第二种 利用伪元素 */ div::before { content: ""; width: 150px; display: block; height: 300px; background: blue; float: left; border-radius: 150px 0 0 150px; } div::after { content: ""; width: 150px; display: block; height: 300px; background: green; float: right; border-radius: 0 150px 150px 0; }