CSS分个轮子,大转盘应该用得上吧

<html lang=”en”><head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
*{margin: 0;padding: 0;}
.wrapper{
width: 300px;height: 300px;margin: 20px auto;border-radius: 300px;border: 3px solid #000;overflow: hidden;
background: linear-gradient(45deg, #272b66 50%, transparent 50%),
linear-gradient(90deg, #2d559f 100%, transparent 0%),
linear-gradient(-45deg, #9ac147 50%, transparent 50%) 100% 0,
linear-gradient(-90deg, #639b47 100%, transparent 0%) 100% 0,
linear-gradient(45deg, transparent 50%, #e1e23b 50%) 100% 100%,
linear-gradient(90deg, transparent -100%, #f7941e 0%) 100% 100%,
linear-gradient(-45deg, transparent 50%, #662a6c 50%) 0 100%,
linear-gradient(-90deg, transparent -100%, #9a1d34 0%) 0 100%,
#000;
background-repeat: no-repeat;
background-size: 50% 50%;
}
</style>
</head>
<body>
<div class=”wrapper”></div>

</body></html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注