【html/CSS】1本の斜め線を引く方法

htmlやCSSにおいて縦や横の直線は比較的カンタンに引くことができます。

しかし、斜め線となると工夫が必要です。

斜め線を引く方法を２つ、手順も丁寧に紹介します。

要素を斜めにする

transformは要素を変化させるCSSです。「transform: rotate()」を使うと要素を回転できます。()内には角度を指定します。45degは45度です。指定した角度だけ時計回りに回ります。

これで要素を斜めにして斜め線を表現します。

1.横線を作る

まずは横線を作りましょう。下記はhrにしていますがdivでもかまいません。

<style>
.example{
    width: 100px;
    height: 100px;
    background: #ace7f2;
}
.example hr{
    width: 100px;
    border: 0;
    border-top: 10px solid #333;
    margin: 0;
    padding: 0;
}
</style>
<div class="example"><hr></div>

水色の箱は背景です。回転したことがわかりやすいように記述しています。

わかりやすいように線幅を太くしていますが細い線でも大丈夫です。

borderの線ではなく、heightで太さを表現し、backgroundで色を指定するのもアリです。

2.斜めにする

先述したようにtransform: rotateで斜めにします。

<style>
.example2{
    width: 100px;
    height: 100px;
    background: #ace7f2;
}
.example2 hr{
    /*コレ*/transform: rotate(45deg);
    width: 100px;
    border: 0;
    border-top: 10px solid #333;
    margin: 0;
    padding: 0;
}
</style>
<div class="example2"><hr></div>

角度についてはこちらを参考にしてください。

前後の空間は斜めにする前の状態となっているため、斜めにしたことではみ出しています。

marginで調整するか回転軸を調整することになります。

3.回転軸の調整

回転させるということは軸があります。

何も指定しない場合、横の真ん中、縦の一番上が軸となっています。

回転軸を左上に変えてみましょう。

回転軸の指定は「transform-origin」です。

<style>
.example3{
    width: 100px;
    height: 100px;
    background: #ace7f2;
}
.example3 hr{
    transform: rotate(45deg);
    /*コレ*/transform-origin: 0% 0%;
    width: 100px;
    border: 0;
    border-top: 10px solid #333;
    margin: 0;
    padding: 0;
}
</style>
<div class="example3"><hr></div>

transform-originでは横方向の軸、縦方向の軸の順で軸を指定します。数値は0%～100％です。

横方向なら左ほど0％で、右に行くほど100％となります。

縦方向なら上ほど0％で、下に行くほど100%になります。

もともとの軸は横の真ん中、縦の一番上でしたので下記のようになっていたわけです。

左上を軸にする場合はそれぞれ0%,0%ですので下記を指定します。

4.長さ・太さの調節

斜めにすると長さが足りないため長さを調節します。

<style>
.example4{
    width: 100px;
    height: 100px;
    background: #ace7f2;
    padding: 1px;
}
.example4 hr{
    transform: rotate(45deg);
    /*修正*/width: 141px;
    border: 0;
    /*修正*/border-top: 1px solid #333;
    margin: 0;
    padding: 0;
    transform-origin: 0% 0%;
}
</style>
<div class="example4"><hr></div>

斜め線の長さは三平方の定理で求められます。

角度が45度の場合は1辺の長さに1.414を掛けましょう。

角度が30度または60度の場合は短辺の長さに2を掛けましょう。

計算が難しい場合、数値を変えていってちょうどいい長さを探すといいでしょう。

太さはわかりやすく10pxにしていましたが、最終的に1pxの線としました。

斜線はこれで完成です。

背景色を斜めにする

background-image: linear-gradientは背景色をグラデーションにするCSSです。

これを利用して斜め線を表現します。

1.グラデーションを作る

<style>
.example5{
    width: 100px;
    height: 100px;
    background: #ace7f2;
    background-image: linear-gradient(transparent, #333)
}
</style>
<div class="example5"></div>

下記のように記述するとグラデーションを作ることができます。

サンプルでは背景色として水色を指定しています。

斜め線は線の部分が黒、それ以外は透明となります。

透明は「transparent」で指定できます。

よって透明から黒へ変化するグラデーションとなり、透明部分は背景色の水色が見えている状態です。

2.斜めにする

<style>
.example6{
    width: 100px;
    height: 100px;
    background: #ace7f2;
    background-image: linear-gradient(to right top, transparent, #333)
}
</style>
<div class="example6"></div>

グラデーションの向きは「初めの色」の前に指定します。

向きは「to right top」「左下の頂点から右上の頂点へ」のように「to」を使った指定方法と、「45deg」「45度」のように角度を指定する方法があります。

今回は斜め線を引くという目的で「to」を使います。

3.線を表現する

<style>
.example7{
    width: 100px;
    height: 100px;
    background: #ace7f2;
    background-image: linear-gradient(to right top, transparent 50%, #333 50%)
}
</style>
<div class="example7"></div>

グラデーションでは色の位置を指定できます。

始まりの位置と終わりの位置を同じ位置にすることで、グラデーションがない2色の背景となります。

反対側も同じようにしましょう。

<style>
.example8{
    width: 100px;
    height: 100px;
    background: #ace7f2;
    background-image: linear-gradient(to right top, transparent 50%, #333 50%, #333 51%, transparent 51%)
}
</style>
<div class="example8"></div>

線の部分は「#333 50%, #333 51%」と、1%の幅となっています。

これでもいいですが、親の幅によって線の太さが変わってしまいます。

pxで指定したい場合は下記のようにします。

<style>
.example9{
    width: 100px;
    height: 100px;
    background: #ace7f2;
    background-image: linear-gradient(to right top, transparent 50%, #333 50%, #333 calc(50% + 1px), transparent calc(50% + 1px))
}
</style>
<div class="example9"></div>

線の位置を「calc(50% + 1px)」と指定することで1pxの幅にできます。IEでも表示されます。

【まとめ】斜め線を引く方法

transform: rotateを使って要素を斜めにする

こんなときオススメ

• hrなど要素を斜めにしたいとき
• 「×」のように重ねたり、位置、長さを調整したいとき
• 角度が決まっているとき

background-image: linear-gradientで斜め線の背景を作る

こんなときオススメ

• 要素を増やしたくないとき
• tableのマスなど、頂点から頂点の斜め線を引きたいとき
• 角度が45度の倍数のとき（それ以外の時ギザギザになる）

以上、斜め線を引く方法を2つ紹介しました。