web-dev-qa-db-ja.com

境界線の長さを制限する方法はありますか？

境界線の長さを制限する方法はありますか。 <div>の下に境界線があるのですが、<div>の左側に半分だけ伸びる境界線を追加したいと思います。

ページに余分な要素を追加せずにそうする方法はありますか？

csscss3
186
mcbeav

お役に立てれば：

#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>
158
sObr

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;
}

（注 - 擬似要素をレンダリングするにはcontent: "";宣言が必要です）

228
TrevC

: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;
}

#menu > ul > li {
  position: relative;
  float: left;
  padding: 0 10px;
  list-style: none;
}
#menu > ul > li + li:after {
  content: "";
  background: #ccc;
  position: absolute;
  bottom: 25%;
  left: 0;
  height: 50%;
  width: 1px;
}
<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>
32
user2397120

CSSプロパティでは、境界線の太さだけを制御できます。長さではありません。

しかし、ボーダー効果を模倣して、他の方法で必要に応じてそのwidthとheightを制御することができます。

CSS（線形グラデーション）の場合：

linear-gradient()を使用して背景画像を作成し、そのサイズと位置をCSSで制御して境界線のように見せることができます。要素に複数の背景画像を適用できるので、この機能を使用して画像のように複数の境界線を作成し、要素のさまざまな側に適用できます。残りの利用可能な領域を無地の色、グラデーション、または背景画像で覆うこともできます。

必要なHTML：

必要なのは1つの要素だけです（場合によっては何らかのクラスがあります）。

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

ステップ：

  1. linear-gradient()で背景画像を作成してください。
  2. background-sizeを使用して、上で作成した画像のwidth/heightを境界線のように調整します。
  3. background-positionを使用して、上記で作成した枠の位置を調整します（left、right、left bottomなど）。

必要な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()を使えば、無地の境界線とグラデーションを作ることができます。以下はこの方法で作成されたボーダーのいくつかの例です。

片側だけに境界線を適用した例：

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, calc(100% - 4px) 100%;
  background-position: left bottom, 4px 0;

  height: 160px;
  width: 160px;
  margin: 20px;
}
.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(steelblue, steelblue);
}
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

両側に境界線を適用した例：

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
  background-position: left bottom, right top, 4px 0;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(purple, red),
                    linear-gradient(steelblue, steelblue);
}
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

すべての辺に境界線を適用した例

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(to right, purple, red),
                    linear-gradient(to bottom, purple, red),
                    linear-gradient(to left, purple, red),
                    linear-gradient(steelblue, steelblue);
}
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

スクリーンショット：

Output Image showing half length borders

14
Mohammad Usman

水平線の場合はhrタグを使用できます。

hr { width: 90%; }

しかし、境界の高さを制限することは不可能です。要素の高さのみ.

14
Edmhs

境界は辺ごとにのみ定義され、辺の端数では定義されません。それで、いいえ、あなたはそれをすることができません。

また、新しい要素も境界線ではなく、必要な動作を模倣するだけですが、それでも要素です。

8
Ben

これはCSSトリックであり、正式な解決策ではありません。要素を配置するのに役立つので、ピリオドを黒にしてコードを残します。その後、コンテンツが（color：white）と（margin-top：-5px程度）色を付けて、ピリオドがないようにします。

div.yourdivname:after {
content: ".";
  border-bottom:1px solid grey;
  width:60%;
  display:block;
  margin:0 auto;
}
4
Justin Munce

これを行う別の方法は、線形グラデーションと組み合わせてborder-imageを使用することです。

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以上

よりよいサポートのためにはベンダープレフィックスも追加します。

border-imageを使うことができます

3
Daniel Z.

別の解決策はあなたが左のボーダーの外観をまねるために背景画像を使うことができるということです

  1. グラフィックとして必要な左ボーダースタイルを作成する
  2. Divの一番左に配置します（古いブラウザでは、テキストサイズの約2倍の増加を処理できるだけの長さにします）。
  3. 垂直位置をdivの上から50％に設定します。

あなたはIEのために微調整する必要があるかもしれません（いつものように）が、それがあなたが探しているデザインであれば、それは一撃の価値があります。

  • 私は一般的にCSSが本来提供しているもののために画像を使用することに反対しています、しかし時々設計がそれを必要とするならば、それを他に回す方法がありません。
2
Kevin

辺ごとに1つだけ境界線を定義できます。そのためには追加の要素を追加する必要があります。

1
Simon