<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="height: 50px;"></div> <div class="zhuzi_content"> <div class="top"></div> <div class="left"></div> <div class="right"></div> </div> <style type="text/css"> .zhuzi_content { position: relative; width: 100px; height: 600px; margin: 0 auto; } .top { width: 100px; height: 31px; background: rgba(102, 219, 234, 1); position: absolute; top: -30px; left: 0px; transform: rotate(45deg); transform: skew(299.5deg) rotate(18deg); z-index: 100; } .left { position: absolute; top: 0; left: 0; width: 41%; height: 100%; transform: skew(0deg,35deg); background-image:linear-gradient(180deg,rgba(102, 219, 234, 0.6)0%,rgba(102, 219, 234, 0.08)100%); } .right { position: absolute; top: 0; right: 0; width: 60%; height: 100%; transform: skew(0deg,-27deg); background-image:linear-gradient(180deg,rgba(102, 219, 234, 0.6)0%,rgba(102, 219, 234, 0.08)100%); } </style> </body> </html>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!