角枠を装飾してみた

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

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;
}

お問い合わせはこちらから

メール送信後、3日経過しても返信がない場合は、PCメールが受信できない設定になっている可能性がございます。
携帯やスマフォのキャリアメールの場合は、受信設定の変更をお願い申し上げます。

前の記事

画像に文字を重ねる