HTML / CSS

【CSS】画像の上の角に三角

 

右上

/* ラベル部分 右上に表示 */
.tri::before {
    content: "";
    top: 0;
    right: 0;
    border-bottom: 4em solid transparent;
    border-right: 4em solid #c12748; 
    position: absolute;
    z-index: 100;
}
.tri::after {
    content: "New!";
    display: block;
    top: 5px;
    transform: rotate(45deg);
    color: #fff; 
    right: 0;
    position: absolute;
    z-index: 101;
}

 

左上

/* ラベル部分 左上に表示 */
.tri::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 4em solid transparent;
    border-left: 4em solid #c12748; 
    position: absolute;
    z-index: 100;
}
.tri::after {
    content: "New!";
    display: block;
    top: 5px;
    transform: rotate(-45deg);
    color: #fff; 
    left: 0;
    position: absolute;
    z-index: 101;
}

 

右下

/* ラベル部分 右下に表示 */
.tri::before {
    content: "";
    bottom: 0;
    right: 0;
    border-top: 4em solid transparent;
    border-right: 4em solid #c12748; 
    position: absolute;
    z-index: 100;
}
.tri::after {
    content: "New!";
    display: block;
    bottom: 5px;
    transform: rotate(135deg);
    color: #fff; 
    font-weight: bold;
    right: 0px;
    position: absolute;
    z-index: 101;
}

 

左下

/* ラベル部分 左下に表示 */
.tri::before {
    content: "";
    bottom: 0;
    left: 0;
    border-top: 4em solid transparent;
    border-left: 4em solid #c12748; 
    position: absolute;
    z-index: 100;
}
.tri::after {
    content: "New!";
    display: block;
    bottom: 5px;
    transform: rotate(-135deg);
    color: #fff; 
    font-weight: bold;
    left: 0px;
    position: absolute;
    z-index: 101;
}
RELATED POST