CSS实现简单的角标效果

一、效果

二、HTML结构

三、CSS代码
#outer{
position: relative;
width: 200px;
height: 123px;
border: 1px solid #BCBCBC;
border-radius: 3px;
}
#triangle{
position: absolute;
right: 0;
bottom: 0;
border-bottom: 40px solid lightskyblue;
border-left: 40px solid #FFF;
border-bottom-right-radius: 3px;
}
#text{
position: absolute;
bottom: 7px;
right: 3px;
font-size: 10px;
font-weight: bold;
text-align: center;
color: #EF784B;
transform: rotate(-45deg);
z-index:1;
}
#smalltriangle{
position: absolute;
right: 0;
bottom: 0;
border-bottom: 15px solid #FFF;
border-left: 15px solid lightskyblue;
border-bottom-right-radius: 3px;
}