CSS - Граница, где видна только половина границы

Я запутался в том, чтобы заставить его работать в CSS только для того, чтобы иметь div, где граница будет видна только на половине ширины.

Стиль рамки - это простой 1px solid #000;

Однако, я хочу, чтобы верхняя часть границы div не была видна везде (на 100% по ширине div), а только на первые 50% ширины div.

Я не смог получить пример этого в любом месте, и он должен быть в процентах, поэтому обычный пакет трюков (изображение во второй половине,...).

Ответы

Ответ 1

Будет ли это работать:

#holder {
        border: 1px solid #000;
        height: 200px;
        width: 200px;
        position:relative;
        margin:10px;
} 
#mask {
        position: absolute;
        top:-1px;
        left:1px;
        width:50%;
        height: 1px;
        background-color:#fff;
}

<div id="holder">
        <div id="mask"></div>
</div>

Ответ 2

Если вы вообще не хотите связываться с HTML, вы можете сделать это с помощью пустого псевдоэлемента, используя только CSS. Вы все равно должны знать цвет фона, конечно (предполагая белый здесь):

<span class="half-a-border-on-top">Hello world!</span>

<style>
.half-a-border-on-top {
  border-top:1px solid black;
  position: relative;
}
.half-a-border-on-top:after {
  padding:0;margin:0;display:block;/* probably not really needed? */
  content: "";
  width:50%;
  height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */
  background-color:white;
  position: absolute;
  right:0;
  top:-1px;
}
</style>

Результат:

Отрывок

    .half-a-border-on-top {
      border-top:1px solid black;
      position: relative;
    }
    .half-a-border-on-top:after {
      padding:0;margin:0;display:block;/* probably not really needed? */
      content: "";
      width:50%;
      height:1.1px;
      background-color:white;
      position: absolute;
      right:0;
      top:-1px;
    }

    <span class="half-a-border-on-top">Hello world!</span>

Ответ 3

покажите вам, как я редактирую код лео, чтобы поставить половину границы слева в центре.

попробуйте следующее:

html code

<div class="half-a-border-on-left">Hello world!</div>

css code

   <style>
.half-a-border-on-left {
  border-left: 1px solid black;
  position: relative;
  height: 50px;
  background: red;
}
.half-a-border-on-left:after {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 10px;
  background-color:white;
  position: absolute;
  left:-1px;
  top: -10px;
}
.half-a-border-on-left:before {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 10px;
  background-color:white;
  position: absolute;
  left: -1px;
  bottom: -5px;
}
</style>

Это код, который я использую, чтобы поставить половину границы, спасибо вам,