【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
東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。
INDEX
PICK UP
