Иконка календарь с помощью CSS3

#css #css3

Есть такой вопрос. У меня иконка для календаря на сайте.

Хотел бы создать ту же самую иконку с помощью css.

На мой взгляд это возможно но пока что не получается сделать желаемое.

Вот сама иконка.


    

Ответы

Ответ 1

Глупо конечно велосипедить ... похоже ?



* {
  margin: 0;
  padding: 0;
}

.icon {
  display: inline-block;
  width: 40px;
  padding-top: 34px;
  border: 1px solid #222;
  margin-top: 30px;
  margin-left: 30px;
  position: relative;
}

.top-line {
  background: #222;
  width: 40px;
  height: 16px;
  position: absolute;
  top: 0px;
  text-align: center;
}

.top-line span {
  display: inline-block;
  width: 5px;
  height: 10px;
  background: #666;
  transform: translate(0, -10px);
  box-sizing: border-box;
}

  

    
    
    
    
  



Ответ 2

Конечно, можно было вообще одним DIV-ом обойтись, но лень))



.cal_paper {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border-top: 12px solid #494949;
  border-radius: 2px;
  height: 44px;
  width: 44px;
  background: #ffffff;
  box-shadow: inset 0px 0px 1px 1px #8F8F8F;
}
.cal_spring {
  position: absolute;
  height: 10px;
  width: 36px;
  top: -15px;
  left: 4px;
  background: linear-gradient(0deg, #494949 20%, #8F8F8F 70%, #494949) 1px 0, linear-gradient(0deg,
#494949 20%, #8F8F8F 70%, #494949) 11px 0, linear-gradient(0deg, #494949 20%, #8F8F8F
70%, #494949) 20px 0, linear-gradient(0deg, #494949 20%, #8F8F8F 70%, #494949) 30px
0, linear-gradient(90deg, #8F8F8F 17%, #494949 19%, #494949 26%, #8F8F8F 28%, #8F8F8F
45%, #494949 46%, #494949 54%, #8F8F8F 55%, #8F8F8F 71%, #494949 73%, #494949 81%,
#8F8F8F 84%) 0 6px;
  background-size: 5px 8px, 5px 8px, 5px 8px, 5px 8px, 36px 3px;
  background-repeat: no-repeat;
}

pre { position: relative; top: -53px; left: 4px; font: bold 20px 'Courier New'; }

  




CSS IMG