cssで角が削れてたり折れたりするboxをつくる

今回やりたかったのは、”四角形の右上だけが削れてる”みたいな形をcssでつくりたい!!
cssの書き方のイメージとしては、
・divで四角形をつくりつつ
・before/afterを駆使し、小さな三角形をdivの上に被せる
ことで削れてたり、めくれてるようにみせる。

角削れのbox

▼HTML

▼CSS

 

角削れにborderもつける!

▼HTML

▼CSS

*角削れ部分のborderの太さの調整が少し必要です。
 

角折れ(ドッグイヤー)のbox

▼ HTML

▼ CSS

対応ブラウザは、ie11/edge/その他モダンブラウザで問題ないことを確認しました!
平成から令和になりましたが、ie11を考えなくてよくなることに期待です。