Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save LeftOverCoder/9698398 to your computer and use it in GitHub Desktop.
Save LeftOverCoder/9698398 to your computer and use it in GitHub Desktop.
<div class="locate">
<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>
body{
background-color:#333333;
display:inline block;
}
.locate{
margin-left:50%;
margin-top:100px;
}
/* Trash icon CSS */
.trash_square:nth-child(1) {
width:34px;
height:36px;
background-color:#fff;
position:absolute;
margin-top:10px;
margin-left:2px;
border-radius: 2px;
}
.trash_square:nth-child(2){
width:38px;
height:6px;
background-color:#fff;
position:absolute;
margin-top:6px;
margin-left:0px;
border-radius: 2px;
}
.trash_square:nth-child(3) {
width: 28px;
height: 31px;
background-color: gray;
position: absolute;
margin-top: 12px;
margin-left: 5px;
}
.trash_square:nth-child(4) {
width: 3px;
height: 24px;
position: absolute;
margin-top: 16px;
margin-left: 8px;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-radius: 4px;
}
.trash_square:nth-child(5) {
width: 3px;
height: 24px;
position: absolute;
margin-top: 16px;
margin-left: 16px;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-radius: 4px;
}
.trash_square:nth-child(6) {
width: 3px;
height: 24px;
position: absolute;
margin-top: 16px;
margin-left: 25px;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-radius: 4px;
}
.trash_square:nth-child(7) {
width:12px;
height:4px;
position:absolute;
margin-top:0px;
margin-left:11px;
border-right:2px solid #fff;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
border-left:2px solid #fff;
border-radius: 2px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment