css border-left 50%height

Question

我希望我的div的左边框只显示div的一半.我想对我的右边界做同样的事情,但是应该从div的底部到div的中间设置.我怎样才能实现它？

Answer 1

@ 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的良好措施.

Answer 2

好问题.使用border属性是不可能的.

唯一想到的是,如果你可以将div设置position为relative,则使用绝对定位的1像素宽div.没有彻底测试,但这应该工作:

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

你也会在右边做同样的事情,取而代之的left是right.

请记住,周围div需要position: relative为此工作.我不确定50%的高度设置是否会在整个浏览器中保持一致 - 确保您进行测试.如果不这样做,您可能不得不求助于像素测量.

Answer 3

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;

演示： https : //jsfiddle.net/hz8wp0L0/

工具： 渐变编辑器

我可以使用： 边框图像 （IE11）

Answer 4

对于那些试图使用左边界来实现 Aleksandr Belugin 上面的答案的人，这里是：

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

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

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