html实现圆桶效果,如何用纯css3绘制圆柱体

Document

.yuanzhu{ position: relative; height: 200px; width: 50px; margin-top: 30px; background:red;margin:30px auto; z-index: 999  }

.yuanzhu:before{position: absolute; top:-10px; content: ""; display: block; width: 50px; height: 20px; border-radius:50%; background: #000;  z-index: 99}

.yuanzhu:after{position: absolute; bottom:-10px; content: ""; display: block; width: 50px; height: 20px; border-radius:50%; background: red; z-index: 9 }

这个是源代码