PURE CSS X or close icon

uses :before and :after to create a psuedo X

by Juan Muñoz

CSS

.close {
    background: teal;
    width: 60px;
    height: 60px;
    position: relative;
    border-radius:50%;
}
.close:after {
    content: '';
    height: 30px;
    border-left: 2px solid #fff;
    position: absolute;
    transform: rotate(45deg);
    left: 30px;
    top:15px;
}

.close:before {
    content: '';
    height: 30px;
    border-left: 2px solid #fff;
    position: absolute;
    transform: rotate(-45deg);
    left: 30px;
    top:15px;
}