盒子左上角三角形 css
阿新 • • 發佈:2021-01-13
技術標籤:學習總結
.pcode {
position:relative;
width: 100%;
background-color: #ccc;
height: 70px;
}
.picon {
display: inline-block;
width: 0;
height: 0;
border-top: 37px solid #f00;
border-right: 37px solid transparent;
position: absolute;
top: 0;
left: 0;
}
.pimg {
color: #fff;
text-align: center;
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: absolute;
padding: 10px 0;
left : 0px;
top: -9px;
font-size: 12px;
}
<div class="pcode"><span class="picon"></span><span class="pimg">市集</span></div>