Question

我有一个div，其样式属性为“border-top，left，right，bottom”。但我不希望边框顶部完成框（这将是一个矩形）。我想要一个小的（约2-3px）开口在右上方（在盒子的长度一侧）。

如何做到这一点？

我认为CSS中有一个名为“border-top-width”的属性，但没有“border-top-length”。

可以使用CSS完成吗？任何其他方法也欢迎。

...谢谢

Answer 1

我不认为这是可能的......我能想到的唯一方法就是通过在其中创建另一个元素（1px宽，3px高）来破解它，将其向右浮动，然后执行margin-right: -1px ...

<div style="border:1px solid black; background-color: white;">
    <div id="borderHack"></div>
    Your content here
</div>

并将“hack”元素设置为样式：

#borderHack {
   float: right;
   margin-right: 1px;
   background-color: white; /*This would have to be the same as the background*/
   height: 3px;
   width: 1px;
}

Answer 2

您必须将border-top设置为none，然后将另一个DIV放入该容器DIV中。然后设置内部DIV的border-top并将其宽度设置为小于容器的宽度。

Answer 3

我不相信你可以单独使用CSS。

您可以添加一个内部div，其背景颜色为开口处所需的颜色。然后，您将对内部元素进行定位和调整大小，使其看起来像是一个间隙。

Answer 4

您可以使用此链接http://www.css3.info/preview/border-image/

中说明的内容执行此操作

基本上你要做的是绘制一个没有顶角的方框并将其指定为border-image

编辑但这仅适用于CSS3，并未由许多浏览器实现，因此目前其他答案都提供了实用的解决方案。

Answer 5

你可以试试这个（相对+绝对定位）与float几乎相同：

<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
    some content here
    <div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>

使用HTML / CSS但是在右上方打开的框？

5 个答案: