境界線の長さを制限する方法はありますか？
回答:
お役に立てれば：
#mainDiv {
height: 100px;
width: 80px;
position: relative;
border-bottom: 2px solid #f51c40;
background: #3beadc;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}<div id="mainDiv">
<div id="borderLeft"></div>
</div>CSSで生成されたコンテンツがこれを解決します。
div {
position: relative;
}
/* Main div for border to extend to 50% from bottom left corner */
div:after {
content: "";
background: black;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}<div>Lorem Ipsum</div>（注- content: "";疑似要素をレンダリングするには宣言が必要です）
:after岩:)
少し再生すると、サイズ変更された境界線要素を中央に表示するように設定することも、その隣に別の要素がある場合にのみ表示されるように設定することもできます（メニューなど）。以下はメニューの例です：
#menu > ul > li {
position: relative;
float: left;
padding: 0 10px;
}
#menu > ul > li + li:after {
content:"";
background: #ccc;
position: absolute;
bottom: 25%;
left: 0;
height: 50%;
width: 1px;
}
CSSプロパティでは、境界線の太さのみを制御できます。長さではありません。
ただし、ボーダー効果を模倣してその境界線を制御しwidthたりheight、他の方法で望みどおりに制御したりできます。
CSS（線形グラデーション）：
を使用linear-gradient()して背景画像を作成し、CSSでそのサイズと位置を制御して、境界線のように見えるようにします。1つの要素に複数の背景画像を適用できるため、この機能を使用して、画像のように複数の境界線を作成し、要素のさまざまな側面に適用できます。残りの利用可能な領域を、単色、グラデーション、または背景画像で覆うこともできます。
必要なHTML：
必要なのは、1つの要素のみ（おそらく何らかのクラスを持つ）です。
<div class="box"></div>手順：
- で背景画像を作成します
linear-gradient()。 - 利用
background-size調整するwidth/heightそれは国境のように見えるように作成されたイメージ（複数可）上記のを。 - 使用
background-position位置（等調節するleft、right、left bottom上記で作成した境界（S）のを等）。
必要なCSS：
.box {
background-image: linear-gradient(purple, purple),
// Above css will create background image that looks like a border.
linear-gradient(steelblue, steelblue);
// This will create background image for the container.
background-repeat: no-repeat;
/* First sizing pair (4px 50%) will define the size of the border i.e border
will be of having 4px width and 50% height. */
/* 2nd pair will define the size of stretched background image. */
background-size: 4px 50%, calc(100% - 4px) 100%;
/* Similar to size, first pair will define the position of the border
and 2nd one for the container background */
background-position: left bottom, 4px 0;
}
例：
ではlinear-gradient()、私たちは、ソリッドカラーのボーダーと同様に持つグラデーションを作成することができます。以下は、このメソッドで作成された境界線の例です。
片側のみに境界線を適用した例：
両側に境界線を適用した例：
すべての辺に境界線を適用した例：
スクリーンショット：
水平線にはhrタグを使用できます：
hr { width: 90%; }ただし、境界の高さを制限することはできません。要素の高さのみ。
height。TDタグのセル境界を置き換えるには、を使用します<td>your content<hr/></td>。
これを行う別の方法は、ボーダー画像を線形グラデーションと組み合わせて使用することです。
div {
width: 100px;
height: 75px;
background-color: green;
background-clip: content-box; /* so that the background color is not below the border */
border-left: 5px solid black;
border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
border-image-slice: 1;
}<div></div>jsfiddle：https ://jsfiddle.net/u7zq0amc/1/
ブラウザサポート：IE：11+
Chrome：すべて
Firefox：15以上
より良いサポートのために、ベンダープレフィックスも追加します。
これはCSSのトリックであり、正式なソリューションではありません。要素を配置するのに役立つので、ピリオドを黒いコードのままにします。その後、コンテンツに（color：white）と（margin-top：-5px程度）を色付けして、ピリオドが存在しないかのようにします。
div.yourdivname:after {
content: ".";
border-bottom:1px solid grey;
width:60%;
display:block;
margin:0 auto;
}