ズボラ応援ブログ始めました

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>
タイトルとURLをコピーしました