#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;
}