A Pen by Ki Han.

css-trash-icon-.markdown

css trash icon

A Pen by Ki Han on CodePen.

License.

index.html

<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>

style.css

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;
}