SVGまたはHTMLキャンバスを使用せずに十字線を引く方法

SVGまたはHTMLキャンバスを使用せずに十字線を引かない方法は？SVGまたはHTMLキャンバスを使用せずに十字線を引く方法

私は先生が単純なCSSを使って作ってくれることを願っています。

2017-08-18 loeghy10

[CSSでdivの背景に斜線を引く]（https://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-の可能性のある重複with-css） –

私はそれに対処するために要素を使用します。 – loeghy10

ここでは、CSSと1つの要素だけを使用してXを構成する2つの対角線があります。

.x { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
.x::before, 
 
.x::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border-right: 1px solid #000; 
 
} 
 

 
.x::before { 
 
    transform: rotate(45deg) translate(-50px, 0); 
 
} 
 

 
.x::after { 
 
    transform: rotate(-45deg) translate(-50px, 0); 
 
}

<div class="x"></div>

出典

2017-08-18 04:25:50

受け入れられる回答である必要があります。すごい仕事 – Eggs

SVGまたはHTMLキャンバスを使用せずに十字線を引く方法

答えて

関連する問題