<!DOCTYPE html> <html> <head> <style> .string-rotate{ width:150px; height:150px; border:1px solid black; border-right:none; border-bottom:none; border-radius:10px; position:relative; transform:rotateZ(45deg); transform-origin:top left; -webkit-transform:rotateZ(45deg); -webkit-transform-origin:top left; left:200px; } .nail-rotate{ display:block; width:10px; height:10px; border-radius:50%; background:black; box-shadow:4px 1px 2px 0px rgb(170,170,170); } .banner-rotate{ width:274px; height:70px; border:1px solid red; transform:rotateZ(-45deg); -webkit-transform:rotateZ(-45deg); position:absolute; top:58px; left:-35px; background-color:red; border-radius:10px; box-shadow:5px 5px 5px 0px rgba(200,200,200,1); } </style> </head> <body> <div class="string-rotate"> <span class="nail-rotate"> </span> <div class="banner-rotate"> </div> </div> </body> </html>
Run
×
Share