css3中绝对定位+旋转的妙用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui" /> <title>画圆</title> <style type="text/css"> body { width:100%; height: 100%; } html { font-family: sans-serif; -webkit-backface-visibility: hidden; -webkit-text-size-adjust: none; } .total{ height: 900px; width: 100%; } .all{ width: 100px; height: 200px; /*-webkit-border-radius:50px;*/ background-color: red; position: relative; overflow: hidden; } .part { position: absolute; right: -31px; bottom: -33px; width: 65px; height: 65px; background-color: green; font-color: black; text-align: center; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } </style> </head> <body> <div class="all"> <div class="part" >完结</div> </div> </body> </html> <script> </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。