框使用 HTML/CSS 但在右上角打开？答案

【问题标题】：box using HTML/CSS but is open at the top right?框使用 HTML/CSS 但在右上角打开？
【发布时间】：2009-10-08 20:33:12
【问题描述】：

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

如何做到这一点？

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

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

谢谢...

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我不相信你可以单独使用 CSS 做到这一点。

您可以添加一个内部 div，该内部 div 的背景颜色与您在开头所需的颜色相同。然后，您将定位和调整内部元素的大小，使其看起来像一个间隙。

【讨论】：

【解决方案4】：

您可以使用此链接http://www.css3.info/preview/border-image/ 中解释的内容来做到这一点

基本上你要做的就是画一个没有顶角的盒子并将其指定为边框图像

编辑：但这仅在 CSS3 中可用，并没有被许多浏览器实现，所以现在其他答案给出了一个实用的解决方案。

【讨论】：

如果我们都可以继续使用 CSS3...嗯...多么美好的世界
是的 ;) 当我们迁移到 CSS3 时，这个答案就会出现

【解决方案5】：

你不妨试试这个（相对+绝对定位）几乎和浮动一样：

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

【讨论】：

你知道你可以说border: 1px solid black，它会适用于所有4个方面吗？ dustindiaz.com/css-shorthand CSS 速记的好指南...