Windows 10 logo in pure HTML and CSS

Windows 10 logo in pure HTML and CSS.

by William Green

HTML

<div id="projectContainer">
    <div id="logoSuperContainer">
        <div id="logoContainer">
            <div id="trapezoid"></div>
            <div id="crossLineOne"></div>
            <div id="crossLineTwo"></div>
        </div>
    </div>
</div>

CSS

/*Created by William Green (15) in California*/
/*Email [email protected] with any comments/questions*/
#projectContainer {
    background-color:#0078D7;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#logoSuperContainer {
    position:absolute;
    top:-webkit-calc(50% - 30px);
    top:-moz-calc(50% - 30px);
    top:-ms-calc(50% - 30px);
    top:calc(50% - 30px);
    width:100%;
    display:table;
}
#logoContainer {
    margin:auto;
    display:table;
}
#trapezoid {
    width:80px;
    border-bottom: 80px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    height:0;
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform:rotate(-90deg);
}
#crossLineOne {
    background-color:#0078D7;
    width: 2px;
    height: 88px;
    position: absolute;
    margin-left:40px;
    top: -4px;
}
#crossLineTwo {
    background-color:#0078D7;
    width: 80px;
    height: 2px;
    position: absolute;
    bottom:-ms-calc(50% - 2px);
    bottom:-moz-calc(50% - 2px);
    bottom:-webkit-calc(50% - 2px);
    bottom:calc(50% - 2px);
    margin-top: -2px;
    margin-top: 10px;
    margin-left: 7px;
}