Html CSS - 只有一半边框可见的边框

CSS - Border where only half of a border is visible

提问by

I am confused as to have to make it work in CSS only to have a div where the border would be only visible on half it's width.

我很困惑，不得不让它在 CSS 中工作，只是为了有一个 div，其中边框只能在宽度的一半上可见。

The border style is a simple 1px solid #000;

边框样式很简单 1px solid #000;

However, I want the top of the div's border to not be visible everywhere (on 100% on the div's width), rather only on the first 50% of the div's width.

但是，我希望div边框的顶部在任何地方都不可见（在div's 宽度的100% 上），而只在 's 宽度的前 50% 上div。

I haven't been able to get an example of this anywhere, and it needs to be in percentages, so the usual bag of tricks (image over the second half,...).

我在任何地方都找不到这样的例子，它需要以百分比表示，所以通常的技巧（下半场的图像，......）。

回答by jeanreis

Would this work:

这是否有效：

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

    

回答by leo

If you do not want to mess with the HTML at all, you can do it with an empty pseudoelement, using CSS only. You still need to know the background color, of course (assuming white here):

如果你根本不想弄乱 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>

Result:

结果：

Snippet

片段

    .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>

Fiddle:

小提琴：

http://jsfiddle.net/vL1qojj8/

http://jsfiddle.net/vL1qojj8/

回答by kadibra

let show you how i edit the code of leo, to put a half border at left in center.

让我向您展示我如何编辑 leo 的代码，在中心左侧放置一个半边框。

try this:

尝试这个：

html code

html代码

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

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

css code

css代码

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

Those are code i use to put a half border thank you leo,

这些是我用来放置半边框的代码，谢谢 leo，

回答by Veerendra Kumar Nagella

我爱海得拉巴

***

.div_1 {
    width: 50px;
    border-bottom: 2px solid black;
}
.div_2 {
   width: max-content;
   margin-bottom: 10px;
}

<div class="div_1" ><div class="div_2">I love Hyderabad</div></div>

---

---