CSS实现三角形角标以及三角形内写文字
1.伪元素
//html<div class="box">
<div class="inner-box"></div>
</div>
//css.box {
width: 500px;
height: 300px;
background-color: blue;
margin: 20px auto;
overflow: hidden;
.inner-box {
width: 0;
height: 0;
border-width: 30px 30px 0 0;
border-style: solid;
border-color: #6c6 transparent transparent transparent;
}
.inner-box::after {
position: relative;
content: "已投";
display: block;
width: 30px;
height: 30px;
font-size: 2px;
left: 0px;
top: -30px;
transform: rotate(45deg);
}
}2. 正方形旋转
<div class="box1">
<div class="inner-box1">
<p>已投</p>
</div>
</div>
.box1 {
position: relative;
width: 200px;
height: 200px;
background-color: orange;
overflow: hidden;
.inner-box1 {
width: 50%;
height: 50%;
background-color: red;
transform: rotate(-45deg);
position: absolute;
left: -30%;
top: -30%;
p {
position: absolute;
left: 50%;
bottom: -15px;
color: #fff;
transform: translateX(-50%);
}
}
}