Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Ki Han.
<div class="icon">
<div class="playicon"></div>
</div>
<div class="icon">
<div class="pauseicon"></div>
</div>
<div class="locate">
<div class="icon">
<div class="trash">
<div class="trash_square"></div>
<div class="trash_square"></div>
<div class="trash_square"></div>
<div class="trash_square"></div>
<div class="trash_square"></div>
<div class="trash_square"></div>
<div class="trash_square"></div>
</div>
</div>
</div>
<div class="arrow">
<div class="icon">
<div class="arrow_part"></div>
<div class="arrow_part"></div>
<div class="arrow_part"></div>
<div class="arrow_part"></div>
</div>
</div>
body{
background-color:#333333;
margin-left:auto;
margin-right:auto;
display:inline block;
align-content:center;
}
.icon{
width:60px;
height:60px;
background-color:rgba(69,229,48, 1);
position:relative;
float:left;
margin-left:50px;
margin-top:30px;
z-index:2;
border-radius: 200px;
}
/* Play Pause Icon CSS*/
.playicon{
position:absolute;
margin-top:13px;
margin-left:16px;
border-left:35px solid #fff;
border-right:18px dashed transparent;
border-top:18px dashed transparent;
border-bottom:18px dashed transparent;
}
.pauseicon{
position:absolute;
margin-top:13px;
margin-left:12px;
border-left:13px solid #fff;
border-right:13px solid #fff;
width: 10px;
height: 35px;
}
/* Trash icon CSS */
.trash > div{
position:absolute;
}
.trash_square:nth-child(1) {
width:34px;
height:38px;
background-color:#fff;
margin-top:15px;
margin-left:12px;
border-radius: 6px;
}
.trash_square:nth-child(2){
width:38px;
height:6px;
background-color:#fff;
margin-top:14px;
margin-left:10px;
border-radius: 2px;
}
.trash_square:nth-child(3) {
width: 28px;
height: 30px;
background-color: rgba(69,229,48, 1);
margin-top: 20px;
margin-left: 15px;
}
.trash_square:nth-child(4), .trash_square:nth-child(5), .trash_square:nth-child(6) {
width: 3px;
height: 24px;
margin-top: 23px;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-radius: 4px;
}
.trash_square:nth-child(4){
margin-left: 18px;
}
.trash_square:nth-child(5) {
margin-left: 26px;
}
.trash_square:nth-child(6) {
margin-left: 35px;
}
.trash_square:nth-child(7) {
width:12px;
height:4px;
margin-top:8px;
margin-left:21px;
border-right:2px solid #fff;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
border-left:2px solid #fff;
border-radius: 2px;
}
/* Arrow Icon CSS*/
.arrow_part:nth-child(1),.arrow_part:nth-child(2){
margin-top:11px;
position:absolute;
border-right:20px solid transparent;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
}
.arrow_part:nth-child(1){
margin-left:23px;
border-left:20px solid rgba(255,255,255, 1);
}
.arrow_part:nth-child(2){
margin-left:15px;
border-left:20px solid rgba(69,229,48, 1);
}
.arrow_part:nth-child(3){
position:absolute;
margin-left:15px;
margin-top:11px;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid rgba(69,229,48, 1);
border-bottom:8px solid transparent;
}
.arrow_part:nth-child(4){
position:absolute;
margin-left:15px;
margin-top:35px;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid transparent;
border-bottom:8px solid rgba(69,229,48, 1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment