ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

cssコピペで作るマスキングテープ風ボックス(飾り枠)

f:id:niketcha:20190711150500p:plain

マスキングテープで貼られたメモ帳のようなボックス(飾り枠)をcssコピペだけで導入する方法です。

テープ上に表示される文字も自由に変更できます。

またテープの色やメモの背景色もcssで簡単に変えることができますよ。

f:id:niketcha:20190711150246p:plain

コードの書き方

css

.mastebox {
    position: relative;
    background-color: #fff8ed;
    padding: 1em;
    margin-bottom:20px;
}
.mastebox .boxtitle {
    position: absolute;
    top: -1em;
    background-color: rgba(233,148,150,0.4);
    padding: 0.25em 2em;
    color: #fff;
    transform: rotate(-4deg);
}
.mastebox p {
    margin: 0; 
    padding:0.5em;
}
/*めくれてる部分の設定*/
.mastebox::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-width: 0 0 18px 18px;
    border-style: solid;
    border-color: #f6e5d7 #fff #fff #f6e5d7;/*めくれてる部分の色*/
}

RGB値はこちらのサイトで調べられます。

html

<div class="mastebox">
    <span class="boxtitle">テープ上に乗せたい文字</span>
    <p>本文</p>
</div>