商品枠

左上に△の表示

/* 商品に見立てた枠 */
.triangle {
    background-image: url(/wp-content/uploads/2020/09/aroma1.jpg);
    width: 640px;
    height: 400px;
    border: #eee 1px solid;
    margin: 0 auto;
    position: relative;
}

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

左下に△の表示

/* ラベル部分 左下に表示 */
/* 商品に見立てた枠 */
.triangle-u {
    background-image: url(/wp-content/uploads/2020/09/aroma1.jpg);
    width: 640px;
    height: 400px;
    border: #eee 1px solid;
    margin: 0 auto;
    position: relative;
}
/* ラベル部分 左下に表示 */
.triangle-u::before {
    content: "";
    bottom: 0;
    left: 0;
    border-top: 4em solid transparent;
    border-left: 4em solid #c12748; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;
}
.triangle-u::after {
    content: "New!";
    display: block;
    bottom: 5px;
/*    transform: rotate(-135deg);*/
    color: #fff; /* 文字色はここで変更 */
    font-weight: bold;
    left: 0px;
    position: absolute;
    z-index: 101;
}