【js/css/画像】長方形に斜めの線を引く方法

背景に線を引く方法にはcssを使う方法があります。

css「 linear-gradient 」を使うことで背景に線を引くことができます。

斜め線をいれる方法

linear-gradientを使って正方形の背景に斜め線をいれる

<div class="box-line1"></div>
<style> 
.box-line1{
position: relative;
width: 100px;
height: 100px;
background: #eee;
background-image: linear-gradient(to right top, transparent 49%, #000 49%, #000 50%, transparent 50%);
}
</style>

正方形の場合は線もきれいにひかれています。

長方形にすると

<div class="box-line2"></div>
<style> 
.box-line2{
position: relative;
width: 300px;
height: 100px;
background: #eee;
background-image: linear-gradient(to right top, transparent 49%, #000 49%, #000 50%, transparent 50%);
}
</style>

さきほどの長方形のときは線がきれいでしたが長方形にすると斜めの線がギザギザになりあらく見えてしまいます。

jsで斜め線をいれる

次はjsを使って斜め線をいれてみましょう。

html

<div class="inner">
        <div class="box"></div>
</div>

css

.inner{
        display: flex;
        flex-wrap: wrap;
	padding: 10px;
}

.box{
        position: relative;
        width: calc(100% / 3 - 20px);
        height: 200px;
        background: #eee;
	margin-right: 20px;
        margin-bottom: 30px;
        overflow: hidden;
}
       
.box:after{
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        height: 1px;
        background: #000;
        transform-origin: left top;
}

js

jQuery(window).on('load resize',function(){
        diagonal_line(jQuery('.box'));
});    
       
function diagonal_line(obj){
        ww = obj.outerWidth();
        hh = obj.outerHeight();
       
        wwhh = Math.sqrt(ww*ww + hh*hh);
       
        m_atan=Math.atan2(hh,ww);　//ルート計算
       
        angle=(m_atan*360/(2*Math.PI)); //角度
       
        /* スタイル書き込み */ 
        let style_box = '.box:after{' + 'transform: rotateZ(' + angle + 'deg);} .box:after{width:' + wwhh + 'px;}';

        let style = jQuery('<style>');
        style.text(style_box);
 
        jQuery('body').append(style);
}

サンプル

画像で対応する

jsで斜め線を入れる方法を前で紹介しました。

ですがjsだと発火するまでに少し時間がかかるの通信によっては少したってから斜め線がつくという形になります。

そこでjsを使わない方法として斜め線の画像を用意して背景に入れるという方法があります。

html

<div class="inner">
        <div class="box"></div>
</div> 

css

.box{
        width: 350px;
        height: 200px;
        background: #eee;
        position: relative;
}
       
.box:after{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: url("./stock_bg.png") no-repeat;
        background-size: 100% 100%;
}

サンプル