无意间在QZone发现了一种以其他方式实现的山顶角,如图:
右边的这个就是HTML结构,可以看到是由9个b标签构成利用它们的边框并且用宽度或者margin将其撑开即可实现,例如:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Border</title>
- <style type="text/css">
- *
- {
- margin:0;
- padding:0;
- }
- body
- {
- padding:100px;
- }
- div
- {
- width:5px;
- }
- .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8,.b9
- {
- border-left:solid #666 1px;
- height:1px;
- overflow:hidden;
- display:block;
- clear:both;
- float:right;
- }
- .b1,.b9
- {
- width:1px;
- }
- .b2,.b8
- {
- width:2px;
- }
- .b3,.b7
- {
- width:3px;
- }
- .b4,.b6
- {
- width:4px;
- }
- .b5
- {
- width:5px;
- }
- </style>
- </head>
- <body>
- <div>
- <b class="b1"></b>
- <b class="b2"></b>
- <b class="b3"></b>
- <b class="b4"></b>
- <b class="b5"></b>
- <b class="b6"></b>
- <b class="b7"></b>
- <b class="b8"></b>
- <b class="b9"></b>
- </div>
- </body>
- </html>
当然用margin也是一样的,例如这样修改:
- .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8,.b9
- {
- border-left:solid #666 1px;
- height:1px;
- overflow:hidden;
- display:block;
- width:1px;
- }
- .b1,.b9
- {
- margin-left:4px;
- }
- .b2,.b8
- {
- margin-left:3px;
- }
- .b3,.b7
- {
- margin-left:2px;
- }
- .b4,.b6
- {
- margin-left:1px;
- }
就不多说了,相信大家也都看得懂,DOME在这里。