CSS Checkmark

CSS checkmark; use this instead of an icon!

by William Green

HTML

<div id="checkMarkContainer">
    <div id="checkMark">
        <div id="wrapper">
            <div id="lineOne"></div>
            <div id="lineTwo"></div>
        </div>
    </div>
</div>

CSS

#checkMarkContainer {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:block;
    background-color:#eee;
}
#wrapper {
    margin:auto;
    display:table;
}
#lineOne {
    background-color:#58CF25;
    display:block;
    width:100px;
    height:20px;
    position:absolute;
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
    margin-left:2px;
}
#lineTwo {
    width:20px;
    height:50px;
    display:block;
    position:absolute;
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
    background-color:#58CF25;
}
#checkMark {
    margin:auto;
    top:50%;
    position:absolute;
    width:100%;
    text-align:center;
}