css制作抽奖轮盘效果/扇形菜单

先上效果图

附上代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>轮盘</title>
<style type="text/css">
#L {
position: relative;
overflow: hidden;
width: 400px;
height: 400px;
margin: 150px auto;
background-color: #ddd;
border-radius: 200px;
}

#L ul li {
list-style: none;
position: absolute;
width: 200px;
height: 200px;
right: 50%;
top: 0;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

#L .L1 {
background-color: red;
-webkit-transform: skew(54deg);
-moz-transform: skew(54deg);
-ms-transform: skew(54deg);
transform: skew(54deg);
}

//倾斜54,旋转36
#L .L2 {
background-color: #FCF6E6;
-webkit-transform: rotate(36deg) skew(54deg);
-moz-transform: rotate(36deg) skew(54deg);
-ms-transform: rotate(36deg) skew(54deg);
transform: rotate(36deg) skew(54deg);
}

#L .L3 {
background-color: red;
-webkit-transform: rotate(72deg) skew(54deg);
-moz-transform: rotate(72deg) skew(54deg);
-ms-transform: rotate(72deg) skew(54deg);
transform: rotate(72deg) skew(54deg);
}

#L .L4 {
background-color: #FCF6E6;
-webkit-transform: rotate(108deg) skew(54deg);
-moz-transform: rotate(108deg) skew(54deg);
-ms-transform: rotate(108deg) skew(54deg);
transform: rotate(108deg) skew(54deg);
}

#L .L5 {
background-color: red;
-webkit-transform: rotate(144deg) skew(54deg);
-moz-transform: rotate(144deg) skew(54deg);
-ms-transform: rotate(144deg) skew(54deg);
transform: rotate(144deg) skew(54deg);
}

#L .L6 {
background-color: #FCF6E6;
-webkit-transform: rotate(180deg) skew(54deg);
-moz-transform: rotate(180deg) skew(54deg);
-ms-transform: rotate(180deg) skew(54deg);
transform: rotate(180deg) skew(54deg);
}

#L .L7 {
background-color: red;
-webkit-transform: rotate(216deg) skew(54deg);
-moz-transform: rotate(216deg) skew(54deg);
-ms-transform: rotate(216deg) skew(54deg);
transform: rotate(216deg) skew(54deg);
}

#L .L8 {
background-color: #FCF6E6;
-webkit-transform: rotate(252deg) skew(54deg);
-moz-transform: rotate(252deg) skew(54deg);
-ms-transform: rotate(252deg) skew(54deg);
transform: rotate(252deg) skew(54deg);
}

#L .L9 {
background-color: red;
-webkit-transform: rotate(288deg) skew(54deg);
-moz-transform: rotate(288deg) skew(54deg);
-ms-transform: rotate(288deg) skew(54deg);
transform: rotate(288deg) skew(54deg);
}

#L .L10 {
background-color: #FCF6E6;
-webkit-transform: rotate(324deg) skew(54deg);
-moz-transform: rotate(324deg) skew(54deg);
-ms-transform: rotate(324deg) skew(54deg);
transform: rotate(324deg) skew(54deg);
}
</style>

</head>

<body>
<div id="L">
<ul>

<li class="L1">

</li>
<li class="L2">

</li>
<li class="L3">

</li>
<li class="L4">

</li>
<li class="L5">

</li>
<li class="L6">

</li>
<li class="L7">

</li>
<li class="L8">

</li>
<li class="L9">

</li>

<li class="L10">

</li>

</ul>
</div>
</body>

</html>

css制作抽奖轮盘效果/扇形菜单

猜你喜欢