用css能实现一个圆等分12份的样子吗
发布网友
发布时间：2022-10-04 05:40
共2个回答
热心网友
时间：2023-10-13 12:04
可以呀。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>css 12等分圆</title>
</head>
<style type="text/css">
.container {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border: 2px outset deeppink;
border-radius: 50%;
margin:5em auto;
}
.layer {
position: absolute;
transform-origin: left top;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
border: 1px solid white;
box-sizing: border-box;
}
</style>
<script type="text/javascript">
onload = function () {
[].slice.call(document.querySelectorAll('.layer'), 0).forEach(function (item, i) {
item.style.backgroundColor = '#' + (~~(Math.random() * (1 << 24))).toString(16);
item.style.transform = 'rotate(' + 360 / 12 * (i + 1) + 'deg)skewX(60deg)';
});
}
</script>
<body>
<div class="container">
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
</div>
</body>
</html>
热心网友
时间：2023-10-13 12:05
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:200px;height: 200px;background:red;margin:50px auto;border-radius:50%;position: relative;}
p{width:1px;height:200px;position: absolute;top:0;left:100px;background:#fff;transform-origin: 50% 50% ;}
.item1{transform:rotate(30deg);background:blue;}
.item2{transform:rotate(60deg);background:green;}
.item3{transform:rotate(90deg);background:pink;}
.item4{transform:rotate(120deg);background: yellow;}
.item5{transform:rotate(150deg);background: #000;}
.item6{transform:rotate(180deg);background: #fff;}
</style>
</head>
<body>
<div id="box">
<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p>
<p class="item6"></p>
</div>
</body>
</html>
