html - 具有不同四肢的全宽标题

Question

大家好，我一直在尝试为我正在处理的网站制作标题，如上图所示，问题是我希望标题填充 100% 的页面宽度。是否可以向我展示一种在 HTML5/CSS3 中执行此操作而无需将此图像用作背景 img 的方法。

Answer 1

您需要 100%、完全灵活地创建所有内容。试试下面给出的代码 DEMO

这只是为了让您了解如何执行此操作。

CSS

body { background: #ccc; margin:0; padding: 0;}
header {background: #fff; width:100%; float:left; height:60px; position:relative;}
nav {background: red; height:30px; width:100%; float:left; margin-top: 30px;}
.logo {
    position:absolute;
    width:150px; height:80px;  background: #fff;
    border-radius: 0 0 3px 0; left:0; top:0;
}
.triangleDown { width: 0; height: 0; border-left: 50px solid transparent; border-right: 35px solid transparent; border-top: 81px solid #fff; left: 98px; position: absolute;}

HTML

<header>
    <div class="logo"></div>
    <div class="triangleDown"></div>
    <nav></nav>
</header>