Question

我想使用div和边框半径制作以下形状，然后回退到旧浏览器的方角。请没有图片。

我在制作标题旁边的底角时遇到了一些麻烦（用红色框突出显示）。我不想要很多不必要的div，它必须尽可能简单和语义。 alt text http://img715.imageshack.us/img715/4214/bradiuswut.gif

<div class="container">
   <div class="header">Title</div>
   <div class="body">Content</div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; background: #333; border-radius: 5px 5px 0 0;}
.container .body{clear: left; width: 660px; background: #333; border-radius: 0 0 5px 5px;}

有什么想法吗？

编辑1：

我是这样做的：http://jsfiddle.net/a93Rb/16/

<div class="container">
    <div class="header"></div>
    <div class="headerspacer">
       <div class="headercorner"></div>
    </div>
    <div class="body"></div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}  
.container .headerspacer{float: left; position: relative; width: 550px; height: 30px; background: #333;} 
    .container .headerspacer .headercorner{ position: absolute; width: 550px; height: 30px; background: #fff; border-radius: 0 0 0 10px;} 
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

编辑2：

我将使用此方法：http://jsfiddle.net/a93Rb/13/

我还发现了一种使用图像的方法，如果浏览器不支持圆角，则不会出现该图像。它更加语义化，使用border-radius的重点是否定不必要的标记。我想我会实际使用这种方法，但我不会接受它作为答案，因为我说我不想要图像。

<div class="container">
    <div class="header"></div>
    <div class="body"></div>
</div> 

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}                                  
.container .header:after{content: url(http://img24.imageshack.us/img24/1112/corner0.gif); display: block; margin: 20px 0 0 110px;}
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

Answer 1

这是您的纯CSS解决方案http://jsfiddle.net/Starx/a93Rb/，目前仅与FF兼容。您可以使其与其余浏览器兼容。

Answer 2

之前有许多人建议，黑色div内部带有白色div，左下角带有border-radius。 Example here

代码很粗糙，应该重写，但它有效。你应该将div背景颜色与页面颜色同步。

Answer 3

我来参加聚会，但我喜欢挑战，这是我的解决方案：

demo

http://jsfiddle.net/mtTLu/

特点：

无额外加价
跌回直角
没有图片
Webkit和Firefox准备就绪。

然而，它是可怕的CSS代码。如果我曾经遇到过这样做的人，为了避免使用一个非语义代码，我就会打他的脸。

但是，我认为这符合你的限制。

Answer 4

我的想法是白色圆形div，左下角有深色背景。（我不能让它自己工作，所以看到结果会很棒:)）

Answer 5

这是我的解决方案。

我确定这不是最好的，但我是为了倾斜目的而做的，我认为这可能对某人有所帮助！

“最终”结果如下：

alt text

您可以看到它正常工作here。

代码如下：

HTML

<div id="big">

</div>
<div id="other">

</div>
<div id="small">

</div>


<div id="cont">

</div>

CSS

#big{
    background-color:#aaa;
    float:left;
    border: 1px solid red;    
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 50px;
    width: 100px;
}

#cont{
    background-color:#aaa;
    float:bottom;
    margin-top:51px;
    border: 1px solid red;    
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    height: 250px;
    width: 300px;
}

#small{
    float:left;
    margin:25px 0 0 -27px;
    border: 1px solid red;    
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-left-radius: 15px;
    height: 25px;
    width: 25px;
    background-color:#fff;
}

#other{
    z-index:-1;
    float:left;
    margin:25px 0 0 -1px;
    border: 1px solid red;
    height: 25px;
    width: 25px;
    background-color:#aaa;
}

希望它有所帮助，祝你好运！

Answer 6

我还发现了一种使用图像的方法，如果浏览器不支持圆角，则不会出现该图像。它更加语义化，使用border-radius的重点是否定不必要的标记。我想我会实际使用这种方法，但我不会接受它作为答案，因为我说我不想要图像。但这是：http://jsfiddle.net/a93Rb/13/

<div class="container">
    <div class="header"></div>
    <div class="body"></div>
</div> 

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}                                  
.container .header:after{content: url(http://img24.imageshack.us/img24/1112/corner0.gif); display: block; margin: 20px 0 0 110px;}
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

Answer 7

你的问题是“最具语义性的方式”。容器的容器/布局div没有任何语义。语义网意味着帮助他人理解不同的内容，例如表应该是一个表，列表应该是一个列表等。

在那个注意事项中你没有正确标记元素，小心使用div标签代替真正的意义。

<div class="whatever_label">
   <h2>Title</h2> <!-- or lower level heading: h3,h4 etc. -->
   <span></span>
   <p>Content</p>
</div>

/* Container of module */
.whatever_label{
}
/* Heading Tab */
.whatever_label h2{
}
/* Radius: Heading Tab */
.whatever_label span{
}
/* Content */
.whatever_label p{
}

确定html文档是否使用良好语义的一个很好的提示是在浏览器中关闭CSS样式，如果它仍然是逻辑的，它将倾向于语义。

编辑，这似乎是我能想到的最干净的方式，希望它有所帮助：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Box Demo</title>
<style type="text/css">

/* :: Reset default browser stylings.
-------------------------------------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, cite, dfn, ins, kbd, q, code, samp, del, em, var, strong, pre,/* sub, sup,*/
a, abbr, acronym, address, big, font, img, s, 
small, strike, tt, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; vertical-align: baseline;}
body {color: black; background: white;}
ol, ul {list-style: none;}
table{border-collapse: collapse;}

/* Container of module */
.box{
  width:600px;
}
/* Heading Tab */
.box h2{
  float:left;
  font-size:1.0em;
  color:white;
  background: #333;
  height:10px;
  padding:15px 20px 25px 20px;
  margin:0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.box div.radius{
  background: #333;
  float: left;
  height: 25px;
  margin: 25px 0px 0px 0px;
  width: 20px;
}
/* Radius: Heading Tab */
.box span{
  background-color: white;
  -moz-border-radius:0 0 0 10px;
  border-radius: 0 0 0 10px;
  float: left;
  height: 25px;
  margin: 0;
  width: 20px;
}
/* Content */
.box p{
  display:block;
  clear:both;
  color:white;
  background: #333;
  width:560px;
  padding:20px;
  margin:0;
}

</style>

</head>
<body style="margin:20px;">
<div class="box">
   <h2>Whatever title</h2> <!-- or lower level heading: h3,h4 etc. -->
   <div class="radius"><span></span></div>
   <p>Nullam fermentum nibh eget lectus cursus elementum. Vestibulum congue elementum erat, 
    at adipiscing libero blandit sed. Aliquam erat volutpat. Duis feugiat blandit sagittis. 
    Praesent interdum fringilla rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc dui nulla, sodales et posuere nec, varius quis nisl. Cras mauris ipsum, commodo sit amet 
    sollicitudin ut, rutrum eget erat. Nullam aliquam, massa et sagittis suscipit, massa erat 
    adipiscing turpis, et luctus metus velit quis ante. Maecenas elementum tristique euismod. 
    Phasellus iaculis arcu eget libero tempor accumsan. Vestibulum at turpis ac dui venenatis condimentum.
    Duis tristique neque at nisi feugiat ac congue nibh luctus. Proin non elit et sapien feugiat dictum nec at diam.
    Quisque quis feugiat velit. Mauris id tortor id ligula vulputate dictum ac vitae elit. 
    Maecenas congue tincidunt leo, ut lobortis mi tempor sit amet. Vestibulum condimentum euismod neque. 
    Vivamus ullamcorper odio ut lacus ullamcorper id pellentesque orci euismod. Ut vitae arcu nulla.
    </p>
</div>
</body>
</html>

Answer 8

您还应该考虑使用dl元素。

此HTML：

<dl>
    <dt>..</dt>
    <dd>..</dd>
</dl>

将具有比嵌套div更纯的语义，但只有一个“title-content”块可能更尴尬。

最后h(1-6)元素的语义将超过div class="header"

Answer 9

Pete是最好的答案，他是对的，其他解决方案根本不是“语义”。它是一个重要的区别，从你问这个问题的方式来看，它确实是它最重要的元素。语义并不意味着“简单”意味着应该使用正确的标签来最接近地表示它们包含或描述的内容，而不是诉诸于视觉描述，因为这完全是可变的。对于类和ID也是如此。 div标签尽管很有用，但它可能是最少的语义标签之一，应该谨慎使用。

制作这个容器的最具语义的方法

9 个答案: