html - CSS中带有圆角的标签式结构

Question

我有一个带圆角的 CSS 矩形。我想在它上面添加一个类似标签的结构。

这就是我所说的。 http://i.imgur.com/J2h0Ncm.png

我尝试制作两个不同的元素并加上定位，但它看起来并不真实（主要是因为阴影）l。我们可以在单个元素上使用 CSS 吗？

提前致谢！

编辑（更多细节）：

我有一个带有圆角边框的矩形，如下所示：

#mybox
{
width: 800px;
height:400px;
border:thin;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;   
border-color:black;
box-shadow: 3px 3px 10px 5px #000;  
}

我想调整/拉伸顶部看起来像这样。

Answer 1

试试这个代码...

<div style="width: 93px; height: 72px;">
  <div style="width: 93px; height: 13px; background-image: url('tabtop.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: left top"></div>
  <div style="width: 93px; height: 59px; background-image: url('tabbottom.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: left top"></div>
</div>

使用下面的图像...如果您将 div 调整为图像大小，您应该没问题并将它们用作背景属性意味着您可以在实际 div 中包含文本

Answer 2

为什么不使用一些预先打包的东西，比如具有选项卡功能的 bootstrap 或 jquery ui？我可以理解您是否想构建自己的东西，但也许您想要捷径？

引导程序：http: //twitter.github.com/bootstrap/

jquery ui：http: //jqueryui.com/

有许多这样的包可用于帮助您的 ui 开发，但这是两个常见的包

Answer 3

您可以使用 :before 选择器来创建您要的内容。

这是一个快速实现，可让您了解如何使用它：

<div class="foo"></div>

.foo {
    width: 200px;
    height: 100px;
    border: 4px solid #000;
    margin-top: 24px;
    position: relative;
    -webkit-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.foo:before {
    display: block;
    height: 20px;
    width: 30px;
    border: 4px solid #000;
    border-bottom-width: 0;
    content: " ";
    position: absolute;
    left: 0;
    top: -24px;
    background: #fff;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}