MENU
CLOSE
STUDYSYSTEMWEBSITE Edit : 2019.05.13 Update : 2023.01.19

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

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

角削れのbox

▼HTML

▼CSS

 

角削れにborderもつける!

▼HTML

▼CSS

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

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

▼ HTML

▼ CSS

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

 

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。