![見出し画像](https://assets.st-note.com/production/uploads/images/38324356/rectangle_large_type_2_df2a314a51261bd5f4a74d68b7df0998.png?width=800)
#013 CSSで斜めの背景を入れる
こんばんは、yayu(@yayudesign)と申します。
とあるIT企業でインハウス(社内)デザイナーをしております。
1日良い事/物を365日毎日投稿する企画をしております。
今までの記事はマガジンにまとめています!
CSSで斜めの背景を入れる
多分基礎だと思うのですが、そもそもコーディングをあまり必要としない部署にいる+このあしらいを実装する機会がなく、最近はじめて自分で実装したんですね。
ただ、先日調べて出会ったのはtransform: skewでこれはIEのテストに引っかかってました。(なのでIEようにまっすぐのコードをかいた)
で、今日も使う機会があったのですが。なんと、borderのafter,beforeを使って実装できるとのこと!これだとIE引っかからなかったのです。(バージョンによります)
afterとbeforeで+-値を調整するとメガフォン型(と言っていいのか?台形?)の背景も作れます。ただちょっとレスポンシブの調整がシビアですが。
詳しくは、こちらのサイトをご覧ください!
いや〜もう便利でうれしくなった1日でした。
013も良い事でした!
013はジェイソンのナンバーですね。特に関係なく、おもっただけです。
この記事が気に入ったらサポートをしてみませんか?