CSS等分圆实例-优快云博客

本文链接：https://blog.youkuaiyun.com/xnlzg/article/details/110624766

<!DOCTYPE html>
<html>
<head>
    <title>CSS等分圆</title>
    <meta charset="utf-8">
    <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>
</head>
<body onload="onload">
<div class="container">
<div class="layer layer4"></div>
<div class="layer layer4"></div>
<div class="layer layer4"></div>
<div class="layer layer4"></div> 
</div> 
      
<div class="container">
<div class="layer layer5"></div>
<div class="layer layer5"></div>
<div class="layer layer5"></div>
<div class="layer layer5"></div> 
<div class="layer layer5"></div> 
</div> 
	  <script type="text/javascript">
	  document.querySelectorAll('.layer4').forEach(function (item, i) {
            item.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
            item.style.transform = 'rotate(' + 360 / 4 * (i + 1) + 'deg)skewX(0deg)';
            item.style.width = '110px';
            item.style.height = '110px';
        });
	  document.querySelectorAll('.layer5').forEach(function (item, i) {
            item.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
            item.style.transform = 'rotate(' + 360 / 5 * (i + 1) + 'deg)skewX(18deg)'; 
        });
	  </script>
</body>

</html>