我正在尝试创建具有倾斜边缘的标题,无论其高度如何,它们都可以保持其纵横比。是否可能仅使用CSS完成此操作?
如果只有一行,这张图片展示了标题的样子:
//i.imgur.com/akWns0H.jpg
如果是两行或更多行,则应该呈现为:
//i.imgur.com/a44DNXO.jpg
我遇到的问题是,我无法使覆盖标题右侧部分的白色半三角形调整大小,更不能以相同的纵横比调整大小。以下是原始代码所呈现的多行效果:
//i.imgur.com/kNLvmV3.jpg
现在,显示标题的代码是:
HTML:
CSS(层叠样式表):
如果只有一行,这张图片展示了标题的样子:
//i.imgur.com/akWns0H.jpg
如果是两行或更多行,则应该呈现为:
//i.imgur.com/a44DNXO.jpg
我遇到的问题是,我无法使覆盖标题右侧部分的白色半三角形调整大小,更不能以相同的纵横比调整大小。以下是原始代码所呈现的多行效果:
//i.imgur.com/kNLvmV3.jpg
现在,显示标题的代码是:
HTML:
<header>
<nav>
<ul>
<li><a href="#">Public Information</a></li>
</ul>
</nav>
<h1>Board Meeting Schedule</h1>
</header>
CSS(层叠样式表):
* {
font-family: sans-serif;
font-size: 16px;
font-weight: normal;
line-height: normal;
margin: 0;
}
header {
background: #0D3C5B;
display: inline-block;
overflow: hidden;
padding: 18px 80px 12px 20px;
position: relative;
}
header:before {
border-left: 58px solid transparent;
border-top: 62px solid #FFF;
content: "\0020";
display: block;
height: 0;
position: absolute;
right: 0;
top: 0;
width: 0;
}
header nav {
float: left;
margin: 0 6px 0 0;
}
header nav ul {
color: #42AFE3;
display: inline-block;
font-size: 0.75em;
font-weight: bold;
line-height: 1.6666666666666666666666666666667em;
line-height: 2.25em;
list-style: normal;
margin: 0;
padding: 0;
text-transform: uppercase;
}
header nav ul li {
display: inline-block;
}
header nav ul li a {
color: #42AFE3;
text-decoration: none;
}
header nav ul li:after {
content: "\003E";
padding: 0 4px;
}
header h1 {
color: #FFF;
float: left;
font-size: 1.25em;
font-weight: bold;
line-height: 1em;
text-transform: uppercase;
}
header:after {
clear: both;
content: "\0020";
display: block;
visibility: hidden;
}
这里有一个演示: http://jsfiddle.net/doLuj6me/
涉及到it技术,具体内容暂时无法确定。