利用CSS3 transform: rotate(xxdeg)畫對角線
阿新 • • 發佈：2017-07-01
log kit borde order ive 一段 dex css -i
直接上代碼。
<style> *{ /*實際開發中，別這樣偷懶哦*/ margin: 0; padding: 0; list-style: none; } .out{ width: 200px; height: 200px; background-color: #607D8B; display: flex; align-items: center; margin: 0 auto; position: relative; } .inner{ border-left: 1px solid #8BC34A; width: 0; height: 282px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); display: inline-block; position: absolute; z-index: 1; top: -41px; left: 100px; } .txt{ display: block; line-height: 30px; z-index: 999; width: 150px; height: 150px; margin: auto; position: relative; background-color: #607D8B; font-size: 30px; color: #fff; } </style> </head> <body> <div class="out"> <span class="inner"></span> <span class="txt">一段文字，很遲才才才才才才才才才才才才</span> </div> </body>
效果圖如下：
利用CSS3 transform: rotate(xxdeg)畫對角線