我正在尝试使用SVG创建斜率/对角线(第一次,接受其他替代方法),并且即时通讯存在很多问题。我的目标是:
这是斜坡的样子:
我不想使用.png
,那么它将模糊并且我想要尽可能的完美。
黄色部分应该是在div / svg底部或顶部具有斜率的部分。
有什么帮助吗?
的HTML
<div>
<svg width="100%" height="200">
<rect xmlns="http://www.w3.org/2000/svg" transform="rotate(-3.39492 500.731 6.21164)" stroke-opacity="0" id="svg_2" height="55" width="100%" y="-1" x="-3" stroke="#000000" fill="#f0dc10"/>
</svg>
</div>
的CSS
#svg_2{
left: 0;
top: 0;
width: 100%;
margin-top: 50px;
}
如果您愿意使用CSS解决方案,则可以执行以下操作:
演示在这里:http : //jsfiddle.net/jme11/D9M2L/
的CSS
body {
background-color: #000;
margin: 0px;
}
p {
color: white;
}
section {
position: relative;
background: blue;
color: #fff;
text-align: center;
}
section:before {
position: absolute;
content:'';
}
section.diagonal {
background: blue;
}
footer {
position: relative;
background: black;
color: #fff;
text-align: center;
}
footer:before {
position: absolute;
content:'';
}
footer.diagonal {
background: black;
}
.diagonal {
z-index: 1;
padding: 3em;
}
.diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
}
HTML:
<header>
<p>Header</p>
</header>
<section class="diagonal">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</section>
<footer class="diagonal">
<p>Footer</p>
</footer>
如果要支持IE9,请为转换添加ms-前缀:http : //caniuse.com/#search=transform
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句