css border-left 50％height [英] css border-left 50% height

问题描述

我想让div的左边框只显示div的一半。同样我想做到我的右边界，但应该设置从div的底部到div的中间。如何实现？

I want the left border of my div to show only to the half of the div. The same I would like to do to my right border but is should be set from the bottom of the div to the middle of the div. How can I achieve it?

推荐答案

好问题。

如果你可以设置你的div 位置到 relative ，是使用绝对定位，1像素宽 div 。未完全测试，但此应工作：

The only thing that comes to mind, if you can set your div's position to relative, is to use an absolutely positioned, 1 pixel wide div. Not thoroughly tested but this should work:

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

您会在右侧执行相同操作，将 。

You'd do the same on the right hand side, replacing the left property by right.

请记住，周围的 div 需要 position：relative 才能正常工作。我不确定50％的高度设置是否将在整个浏览器中一致地工作 - 确保您测试它。如果没有，您可能需要使用像素度量。

Remember, the surrounding div needs to be position: relative for this to work. I'm not sure about whether the 50% height setting will work consistently throughout browsers - make sure you test it. You may have to resort to pixel measures if it doesn't.

这篇关于css border-left 50％height的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！