角枠を装飾してみた

先日、現行サイトから新サイトへの移行に際し、この枠の装飾よく見るんだけど・・・どうするのかな？調べる間もなく、ブロック枠で編集をしてしまいましたが、せっかくなので探してみました。
ホントはコード表示までしたいのですが、昨日、CrayonSyntaxHighLighterが使えなくなってしまったので、コード表示のプラグイン探していました。SyntaxHighlighter Evolvedにプラグインを変更。プラグインを有効化するまでは、通常のプラグインと同じ。設定も比較的簡単。参考サイトは、こちらでした。

あおろぐ

【WordPress】ソースコードを綺麗に表示するSyntaxHighlighter Evolvedプラグイン...

https://ao-log.com/wordpress-syntaxhighlighter-evolved/

記事の中でソースコードをしたい場合、いろいろ方法はありますが、簡単、綺麗に表示するにはWordPressプラグインが最適です。有名なプラグインにがありますが、3年も更新されていなく今後使い続けること

CrayonSyntaxHighLighterがPHPファイルをアップデートしたら、エラー表示！になったため

左上に△の表示

sample

/* 商品に見立てた枠 */
.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;
}