正方形の水平線と垂直線

Question

以下は私が試した画像ですが、私はCSSを使って正方形を得ることができましたが、正方形の中に水平線と垂直線を描こうとしています。

.hub{ 
    width: 119px; 
    height: 101px; 
    background: #b5adad; 
} 

<div class="hub"></div> 

Answer 1

はこれを行うには多くの方法があり、もう一方は以下のようなグラデーションを使用することです：（。問題の画像は実際には長方形だった）

はアプローチが非常にありますシンプル - 2つの線形グラデーションを使用して2本の細いベタ線を作成し、必要に応じてイメージを配置します。リニアグラデーションは、ソリッドカラーのみを作成しても使用されます。バックグラウンドカラーよりも画像のサイズと位置を制御する方が簡単なためです。

div { 
 
    height: 100px; 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    background-image: linear-gradient(to bottom, red, red), linear-gradient(to right, red, red); 
 
    background-repeat: no-repeat; 
 
    background-size: 1px 100%, 100% 1px; 
 
    background-position: 20px 0px, 0px 10px; 
 
}

<div></div>

---

我々はまた、問題の画像のようにフェードアウトまたは影効果があり、出力を作成することができます。

div { 
 
    height: 100px; 
 
    width: 200px; 
 
    border: 1px solid; 
 
    background-color: gray; 
 
    background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, red, transparent), linear-gradient(to right, black, black), linear-gradient(to bottom, red, transparent); 
 
    background-repeat: no-repeat; 
 
    background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px; 
 
    background-position: 20px 0px, 21px 0px, 0px 10px, 0px 11px; 
 
    box-shadow: inset 0px 0px 3px red; 
 
}

<div></div>

Answer 2

もう一つの方法は、:beforeと:after擬似要素を使用することです：

.hub{ 
 
    width: 119px; 
 
    height: 101px; 
 
    background: #b5adad; 
 
    position: relative; 
 
    padding: 18px 0 0 18px; 
 
} 
 
.hub:after, .hub:before { 
 
    content: " "; 
 
    background: black; 
 
    display: block; 
 
    position: absolute; 
 
} 
 
.hub:after { 
 
    width: 1px; 
 
    height: 100%; 
 
    left: 15px; 
 
    top: 0; 
 
} 
 
.hub:before { 
 
    width: 100%; 
 
    height: 1px; 
 
    top: 15px; 
 
    left: 0; 
 
}

<div class="hub">Lorem ipsum dolor amet</div>