效果图如下:
<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;
}