html邮箱图标代码,CSS3 单元素邮件图标

CSS

语言：

CSSSCSS

确定

/* This Mail Icons was made with LOVE by @lukyVj for Webgate*/

body, html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

/* High res */

background: #ddd; }

mail {

display: block;

margin: 50px auto;

width: 60px;

height: 40px;

background: linear, top, #fefefe, #f5f5f5;

box-shadow: 0 0 1px 0px #999, 0 6px 13px -5px rgba(0, 0, 0, 0.3);

border-radius: 2px;

transition: all 1s ease; }

mail:hover {

box-shadow: 0 0 1px 0px #999, 0 6px 13px -5px rgba(0, 0, 0, 0.5), inset 0 0 3px rgba(0, 0, 0, 0.3); }

mail:before {

content: '';

position: absolute;

display: block;

width: 0;

height: 0;

border-left: 30px dashed transparent;

border-right: 30px dashed transparent;

border-top: 30px dashed #ebebeb; }

mail:after {

content: '';

position: absolute;

display: block;

margin: 10px auto;

width: 0;

height: 0;

border-left: 30px dashed transparent;

border-right: 30px dashed transparent;

/* basic */

border-bottom: 30px dashed rgba(235, 235, 235, 0.5); }

mail:nth-child(2) {

width: 40px;

height: 30px; }

mail:nth-child(2):before {

border-left: 20px dashed transparent;

border-right: 20px dashed transparent;

border-top: 20px dashed #ebebeb; }

mail:nth-child(2):after {

border-left: 20px dashed transparent;

border-right: 20px dashed transparent;

/* little */

border-bottom: 20px dashed rgba(235, 235, 235, 0.5); }

mail:nth-child(3) {

width: 30px;

height: 20px; }

mail:nth-child(3):before {

border-left: 15px dashed transparent;

border-right: 15px dashed transparent;

border-top: 15px dashed #ebebeb; }

mail:nth-child(3):after {

margin: 5px auto;

border-left: 15px dashed transparent;

border-right: 15px dashed transparent;

border-bottom: 15px dashed rgba(235, 235, 235, 0.5); }