创建坡度全宽度css3 [英] Create slope full width css3
本文介绍了创建坡度全宽度css3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图用SVG创建一个斜率/对角线(第一次,其他选择接受)和im有很多问题。我的目标是:
I'm trying to create a slope/diagonal with SVG (first time, other alternatives accepted) and im having a lot of issues with it. My goal is:
- 创建一个全宽斜坡(准备响应)
- 如果有替代方案,对.svg,我很高兴听到它
这是斜坡的外观,应如下所示:
This is how the slopes, should look like:
- $ b
- design mockup
- 斜率如何
- initial webdesign
- design mockup
- how the slope has to be
我不想使用 .png
,那么它会模糊,我想尽可能完美。
I don't want to use an .png
, then it will blur and I want as perfect as possible.
任何帮助?
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解决方案,你可以这样做:
If you're open to a css solution you could do something like this:
演示这里: 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: b
<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
If you want support for IE9 add the ms- prefix for the transform: http://caniuse.com/#search=transform
这篇关于创建坡度全宽度css3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文