#uppercase-z {
width:400px;
height:500px;
border: 1px solid black;
}
.ztb1{
width: 0;
height: 0;
border-left: 90px solid transparent;
border-right: 180px solid transparent;
border-top: 360px solid black;
z-index: 2;
position: absolute;
left:45px;
top:60px;
}
.ztw1{
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 150px solid transparent;
border-top: 300px solid white;
z-index: 2;
position: absolute;
left:40px;
top:110px;
}
.zr1{
height: 100px;
width: 100px;
background-color: white;
z-index: 2;
position: absolute;
left:10px;
top:40px;
}
.ztb2{
width: 0;
height: 0;
border-left: 190px solid transparent;
border-right: 90px solid transparent;
border-bottom: 360px solid black;
z-index: 2;
position: absolute;
left:80px;
top:110px;
}
.ztw2{
width: 0;
height: 0;
border-left: 152px solid transparent;
border-right: 72px solid transparent;
border-bottom: 288px solid white;
z-index: 2;
position: absolute;
left:133px;
top:120px;
}
pre code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 20px;
width:400px;
}