【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
今回やりたかったのは、”四角形の右上だけが削れてる”みたいな形をcssでつくりたい!!
cssの書き方のイメージとしては、
・divで四角形をつくりつつ
・before/afterを駆使し、小さな三角形をdivの上に被せる
ことで削れてたり、めくれてるようにみせる。
▼HTML
|
1 |
<div class="corner_box01"></div> |
▼CSS
|
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 |
.corner_box01 { background: rgba(247, 17, 55, 0.8); width: 200px; height: 230px; position: relative; } .corner_box01:before { height: 0; display: block; position: absolute; right: -3px; content: ""; border-top: solid 50px #fff; border-left: solid 50px transparent; top: -3px; z-index: 2; } .corner_box01:after { height: 0; display: block; position: absolute; right: -2px; content: ""; border-top: solid 50px transparent; border-left: solid 50px transparent; top: -2px; } |
▼HTML
|
1 |
<div class="corner_box02"></div> |
▼CSS
|
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 |
.corner_box02 { background: rgba(247, 17, 55, 0.8); width: 200px; height: 230px; position: relative; border: 2px solid rgb(28, 24, 196); } .corner_box02:before { height: 0; display: block; position: absolute; right: -3px; content: ""; border-top: solid 50px #fff; border-left: solid 50px transparent; top: -3px; z-index: 2; } .corner_box02:after { height: 0; display: block; position: absolute; right: -2px; content: ""; border-top: solid 50px rgb(28, 24, 196); border-left: solid 50px transparent; top: -2px; } |
*角削れ部分のborderの太さの調整が少し必要です。
▼ HTML
|
1 |
<div class="corner_box"></div> |
▼ CSS
|
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 |
.corner_box { background: rgba(247, 17, 55, 0.8); width: 200px; height: 230px; position: relative; } .corner_box:before { height: 0; display: block; position: absolute; right: 0; content: ""; border-top: solid 50px #fff; border-left: solid 50px transparent; } .corner_box:after { height: 0; display: block; position: absolute; right: 0; content: ""; border-bottom: solid 50px rgba(28, 24, 196, 0.8); border-right: solid 50px transparent; top: 0; } |
対応ブラウザは、ie11/edge/その他モダンブラウザで問題ないことを確認しました!
平成から令和になりましたが、ie11を考えなくてよくなることに期待です。
KOHIMOTO LABO
WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。
INDEX
PICK UP
