> 仅一个div 使用css达到图上效果 ``` <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; } ~~~