直接上代码。
<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>
效果图如下：
时间： 2024-11-06 15:49:58