案例：

参考代码: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.wai{
			margin: 50px auto;
			width: 300px;
			height: 253px;
			border:1px solid;
			background: linear-gradient(0deg,#99627b,#ccadce,#62426c);
		}
		.one{
			margin: 50px auto;
			width: 150px;
			height: 125px;
			background: linear-gradient(0deg,#492646,#945278);
			border-radius: 20px;
			padding-top: 25px;
			
		}
		.two{
			margin:auto;
			width: 100px;
			height: 65px;
			border: 10px solid #000;
			background: linear-gradient(350deg,#a85a67,#fab097);
			border-radius: 20px;
			padding-top:15px;
		}
		.three{
			margin:auto;
			width: 45px;
			height: 43px;
			border-radius:25px;
			background: white;
			padding-top:7px;
			padding-left:5px;
		}
		.four{
			margin: auto;
			width: 0;
			height: 0;
			border: 18px solid #000;
			border-left: 25px solid #000;
			border-right:none;
			border-top-color: transparent;
			border-bottom-color: transparent;
		
			
		}
	</style>
</head>

<body>
	<div class="wai">
		<div class="one">
			<div class="two">
				<div class="three">
					<div class="four">
				
				</div>
				</div>
		
			</div>
		</div>
	</div>
</body>
</html>

更多推荐

HTML5网页设计基础——播放器图标