直接上代码。
<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>
效果图如下：
