web-dev-qa-db-ja.com

css border-left 50％高さ

Divの左境界線をdivの半分にのみ表示したい。右の境界線にしたいのと同じですが、divの下部からdivの中央に設定する必要があります。どうすれば達成できますか？

cssborder
27
niao

良い質問。 borderプロパティを使用することはできません。

頭に浮かぶのは、divのpositionをrelativeに設定できる場合、絶対配置の1ピクセル幅divを使用することです。完全にはテストされていませんが、これはshould動作します：

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
            background-color: blue; overflow: hidden'>
 &nbsp;
</div>

右側で同じことを行い、leftプロパティをrightに置き換えます。

周囲のdivはposition: relativeこれが機能するため。 50％の高さ設定がブラウザ全体で一貫して機能するかどうかはわかりません。必ずテストしてください。そうでない場合は、ピクセル単位に頼らなければならないかもしれません。

13
Pekka 웃

@Pekkaに対する同様の、しかし異なるアプローチ：:after擬似セレクター、次のように：

HTMLマークアップ：

<div class="mybox">
    Le content de box.
</div>

CSS：

.mybox {
    position: relative;
    padding: 10px 20px;
    background-color: #EEEEEE;
}

.mybox:after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 25%;
    width: 50%;
    border-bottom: 1px solid #0000CC;
}

...および jsFiddle .

37
indextwo

2018：現代のブラウザの場合：

border-imageを次のようなグラデーションで使用できます...

border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%);
border-image-slice: 1;

enter image description here

デモ：https://jsfiddle.net/hz8wp0L0/

ツール：グラデーションエディター

次を使用できます：border-image（IE11）

4
l2aelba

次を使用できます。

line-height:50%; /*(or less, much less)*/
overflow:visible;

テキストは表示されますが、境界線の色はdivサイズの半分になります。

3
Natan Graaf