区切り線の覚書です。
目次
cssの曲線(円弧)で背景分割/区切り(レスポンシブ対応)
アーチ状の曲線を描くコードです。
<div class="white-bg"><div class="arch"></div></div>
border-bottomのコードで対応して高さを設定するだけのようです。モバイルなどレスポンシブも問題ありません。
.arch {
height: 50px;
background: #eae5df;
border-bottom-right-radius: 50% 20%;
border-bottom-left-radius: 50% 20%;
}
必要に応じてmargin: -10px -10px 0;みたいな調整します。
cssの曲線で背景分割/区切り(ジェネレーターもあり)
ジェネレーターを見つけました。コードも完結でわかりやすいです。
スポンサーリンク
【効かない?】hrのcssの太さ・長さ・余白(marign)・色をつける方法【デザイン】
滅多に使わないのでhrのcss覚書です。デフォルトをリセットするためにborder: none;は必要みたい。
.line {
width: 100%;
height: 2px;
margin: 0;
background-color: #f0a8b8;
border: none;
}
width: 100%;で端から端まで。ただし、bootstrapを使っているときは当たり前だけど中に入れてはダメ。背景の一部として線を引くときは外で扱います。
余白調整
hrは背景がなければmarginで余白調整すればよいみたい。paddingは効かないようです。
しかし、次のような背景があるとmarginだと背景が塗りつぶしにならないようです。
<div class="color-bg" style="height: 50px;"><hr class="line" /></div>
そのため親要素で高さを指定して余白を調整しました。この場合線は。1番上に線があり、高さが取られる形になります。
参考になれば幸いです。
コメント