案例：
参考代码:
<!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网页设计基础——播放器图标
发布评论