盒子模型划分网页模块--播放器图标
播放器图标
三角形模型原码： <style> .triangle{ width: 0; height: 0; border: 40px solid red; border-top-color: black; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } <style> 55 23:06:34 <div> <div class="triangle"> </div> </div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手动实践4</title>
<style>
.a{
width: 500px;
height: 500px;
margin: 50px auto;
background-image: linear-gradient(180deg,#492646,#d3b4d4,#81476b);
padding-top: 5px;
}
.b{
width: 300px;
height: 300px;
background-image: linear-gradient(0deg,#492646,#81476b);
box-shadow: 5px 5px 10px 2px #512f4d;
margin:100px auto;
border-radius: 10%;
padding: 5px;
}
.c{
width: 180px;
height: 180px;
background-image: linear-gradient(0deg,#a85a67,#fab097);
border-radius: 7%;
margin:50px auto;
border:#241826 15px solid;
}
.e{
width: 100px;
height:118px;
background: #ffffff;
border-radius:50%;
margin:30px auto;
padding-left: 20px;
padding-top: 2px;
}
.triangle{
width:5px;
height:0px;
border: 30px solid red;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: #281a29;
border-right-color: transparent;
margin:auto;
margin: 30px;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="e">
<div class="triangle">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
