野良人(のらんど)|大阪府堺市のWEB制作屋さん野良人とは制作事例ブログお問い合わせCSSで斜め45度のリボンを配置する時の計算式2019/05/28CSS技術ネタナナメ要素の配置計算が面倒だったのでメモしておきます。やりたいことこのような斜め45度の帯をCSSで実装します。position:absoluteを使って配置しますが、キレイに真ん中に揃うように計算するのが少しややこしいです。デモ考え方とポイントオレンジの要素を、緑の位置に移動させる値を考えます。補助線(線1)を引いて、移動後の要素の中心が線上にくるように配置します。直角二等辺三角形が見えたら後は簡単。center)、上辺に設定すると分かりやすくなります。border-box;とpaddingを調整します。横にはみ出す分量は、余裕が少ないと複数行になったときに角が見えてしまいます。サンプルコード最低限の配置に関するコードだけ載せています。あとは好きなようにオシャレ装飾をしただければ。新免祥太1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。大阪府堺市を拠点にしていますが、全国のお客様とお仕事をさせて頂いております。お気軽にお問い合わせください。Reserved.野良人とは制作事例ブログお問い合わせ。