canvas绘制四分之一圆_CSS3 四分之一圆

CSS

语言：

CSSSCSS

确定

body {

position: relative;

height: 100vh;

margin:0

}

div {

position: absolute;

background-image: -webkit-linear-gradient(0deg, red 0%, red 33%, lime 33%, lime 66%, blue 66%, blue 100%);

background-image: linear-gradient(90deg, red 0%, red 33%, lime 33%, lime 66%, blue 66%, blue 100%);

width: 100%;

height: 100%;

float: left;

}

div:nth-child(1) {

background-size: 3px 3px;

}

div:nth-child(2) {

background-size: 6px 6px;

-webkit-clip-path: circle(33% at 100% 0);

clip-path: circle(33% at 100% 0);

-webkit-transition: z-index 1ms 0.5s, -webkit-clip-path 0.5s, -webkit-clip-path 0.5s;

transition: z-index 1ms 0.5s, -webkit-clip-path 0.5s, clip-path 0.5s;

}

div:nth-ch