css制作扇形:

DOCTYPE
html
>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
title
>
CSS制作扇形
title
>
<
style
>
.box
{
width
:
300
px
;
height
:
300
px
;
background-color
:
red
;
}
.box1
{
width
:
200
px
;
height
:
200
px
;
/* //倒圆角,依次上,右,下,左 */
/* 设置像素或者百分比值来制作扇形 */
border-radius
:
50
%
0
0
;
background-color
:
#fff
;
}
style
>
head
>
<
body
>
<
div
class
=
"box"
>
<
div
class
=
"box1"
>
div
>
div
>
body
>
html
>
制作后的效果: