html+css3实现div右上角斜三角删除
程序员文章站
2022-05-20 22:30:03
...
html 部分：
<div class="box">
<div>
otherthings
</div>
<div class="box-con">
<span>×</span>
</div>
</div>
<div class="box">
<div>
otherthings
</div>
<div class="box-con">
<span>×</span>
</div>
</div>
<div class="box">
<div>
otherthings
</div>
<div class="box-con">
<span>×</span>
</div>
</div>css部分：
.box{
width:180px;
height:100px;
position:relative;
background: white;
overflow: hidden;
border: 1px solid #cccccc;
}
.box .box-con{
width:60px;
height:60px;
position: absolute;
background: red;
top:-30px;
right:-30px;
transform: rotate(45deg);
}
.box .box-con span{
position: absolute;
bottom:0;
display: block;
width:60px;
text-align: center;
transform: rotate(-45deg);
}效果图：