ボックスの左上に三角形の新着（NEW表示）を表示するCSS

ブログ記事の一覧表示画面などで、新着記事を目立たせたい！

という要望が結構あったりします。

そういう時にこのテクニックは重宝するんじゃないかと。

ご参考にどうぞ。

HTML

<div class="mark-box">
    左上にNEWマーキングするCSSのデモです。
</div>

CSS

.mark-box {
    width: 200px;
    height: 200px;
    position: relative;
    padding: 30px;
    background-color: #fef2f2;
}
.mark-box:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 0 0;
    border-color: #f00 transparent transparent transparent;
}
.mark-box:after {
    position: absolute;
    content: "NEW";
    transform: rotate(315deg);
    display: block;
    font-size: 11px;
    white-space: pre;
    color: #fff;
    top: 12px;
    left: 4px;
    text-align: center;
    z-index: 2;
    line-height: 1.2;
}

Run Result

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

ボックスの左上に三角形の新着（NEW表示）を表示するCSS

HTML

CSS

Run Result

コメントを残すコメントをキャンセル

サイト内検索

Ads

最近の投稿

カテゴリー

カレンダー

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報

MENU

カテゴリー

Ads

HTML

CSS

Run Result

コメントを残す コメントをキャンセル

サイト内検索

Ads

最近の投稿

カテゴリー

タグ

カレンダー

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報

MENU

カテゴリー

タグ

Ads

コメントを残すコメントをキャンセル