はじめに
完全なるメモ。HTMLとCSS(SCSS)だけでやります。
ネットの記事を参考にしているので被っているものがあったらすみません。
参考程度に。
種類は、ストライプ柄とドット柄。
完成イメージ
ストライプ柄 マスキングテープ
ドット柄 マスキングテープ
HTML
HTML
<div class="card">
<span class="masking-tape"></span>
</div>
CSS ストライプ柄
scss
.card {
position: relative;
width: 20rem;
padding: 5rem 0;
border: 2px solid black;
background-color: whitesmoke;
//マスキングテープ風 ストライプ
.masking-tape {
position: absolute;
top: -1em;
left: 30%;
width: 100px;
height: 30px;
background-image: linear-gradient(
-45deg,
rgba(203, 64, 66, 0.5) 25%,
transparent 25%,
transparent 50%,
rgba(203, 64, 66, 0.5) 50%,
rgba(203, 64, 66, 0.5) 75%,
transparent 75%,
transparent 100%
);
background-repeat: repeat;
background-size: 20px 20px;
background-position: 0 0, 20px 20px;
border-left: 2px dotted rgba(0, 0, 0, 0.1);
border-right: 2px dotted rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
padding: 0.25em 2em;
background-color: white;
transform: rotate(-4deg);
}
}
background-image: linear-gradient( -45deg,
を 45degに変えると左上から右下へのストライプに変わる。
CSS ドット柄
scss
.card {
position: relative;
width: 20rem;
padding: 5rem 0;
border: 2px solid black;
background-color: whitesmoke;
//マスキングテープ風 ドット
.masking-tape {
position: absolute;
top: -1em;
left: 30%;
width: 100px;
height: 30px;
background-image: radial-gradient($yellow-clear 30%, transparent 30%),
radial-gradient($yellow-clear 30%, transparent 30%);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
background-repeat: repeat;
border-left: 2px dotted rgba(0, 0, 0, 0.1);
border-right: 2px dotted rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
padding: 0.25em 2em;
background-color: white;
transform: rotate(-4deg);
}
}
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
background-size は background-positionの倍である必要がある！
最後に
構造はデベロッパーツールでいじりながら理解しました。
もっとスマートな方法があるかもしれませんが
メモとして残しておきまーす。
↧