绘制抽奖转盘 （CSS+JS）

HTML部分

<div class="box">
		<h1>幸运大转盘</h1>
		<div class="giant-box">
			<div class="prize">
				<span class="prize-text">一等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">二等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">三等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">四等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">五等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">六等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">七等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">八等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">九等奖</span>
			</div>
			<div class="prize">
				<span class="prize-text">十等奖</span>
			</div>
		</div>
		<button type="button" class="giantBtn"">开始抽奖</button>
	</div>

CSS部分

* {
          
   
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
          
   
		display: flex;
		justify-content: center;
		background-color: #55557f;
	}

	.box {
          
   
		width: 380px;
		height: 600px;
		margin-top: 50px;
		background-color: #aaaa7f;
		padding: 15px 20px;
		position: relative;
	}

	.box h1 {
          
   
		text-align: center;
	}

	.giant-box {
          
   
		width: 340px;
		height: 340px;
		margin-top: 50px;
		border-radius: 50%;
		background: #fff;
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	.prize {
          
   
		position: absolute;
		top: 0px;
		left: 110px;
		padding-top: 5px;
		transform-origin: bottom center;
		border-top: 170px solid;
		border-left: 59px solid transparent;
		border-right: 59px solid transparent;
		/* 将所有的盒子绘制成倒三角形，并利用定位叠加在一起 */
	}

	.prize-text {
          
   
		position: absolute;
		top: -145px;
		left: -10px;
		font-size: 20px;
		/* 将盒子里的文字定位放好 */
	}

	.giantBtn {
          
   
		width: 80px;
		height: 80px;
		position: absolute;
		top: 234px;
		left: 150px;
		border-radius: 50%;
		border: none;
		outline: none;
		background-color: antiquewhite;
		cursor: pointer;
	}

	.giantBtn::after {
          
   
		content: ;
		border-width: 33px 22px;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: antiquewhite;
		position: absolute;
		top: -52px;
		left: 18px;
		/* 利用伪类为按钮添加指针 */
	}

现在的样子

JS部分

// 获取到所有的三角形盒子
	var prizes = document.querySelectorAll(.prize);
		
	// 通过循环遍历来将其旋转，并添加不同的背景色
	for (var i = 0; i < prizes.length; i++) {
          
   
		prizes[i].style.transform = `rotate(${
            
     i*36}deg)`;
		if (i % 2 == 0) {
          
   
			prizes[i].style.borderTopColor = "#cd9cf2";
		} else {
          
   
			prizes[i].style.borderTopColor = "#f6f3ff";
		}
	};

最终效果

谢谢大家的阅读，这里是万物之恋，我们下次再见了！