CSS3 仅倾斜右上角
CSS3 skew only top right corner
我正在尝试创建一个网站,其中的部分使用 css3 transform: skewY(-4deg)
进行转换。在最后一个元素上我遇到了问题,如果我倾斜元素,底部会有一个白色的 space。请提供一些建议来修复它。试过 this 但没有用
HTML:
<section id="connect-us">
<div class="content-wrapper">
<h1>Подключиться очень просто!</h1>
<p>Укажите вашу почту и наш менеджер свяжется с вами в течении дня,а на следующий день ваше заведение будет подключено!</p>
<form action="#">
<input type="text" name="email" placeholder="Ваша почта">
<button class="button button--dark-red" type="submit">Отправить</button>
</form>
<div class="social-belt">
<a href="#" class="icon-facebook-with-circle"></a>
<a href="#" class="icon-twitter-with-circle"></a>
<a href="#" class="icon-linkedin-with-circle"></a>
</div>
<footer>
<div class="copyright">
<span><span class="firm-name">Mimicra 2015™</span> Сделано в <a href="http://cpdbbk.com">cpdbbk.com</a></span>
</div>
</footer>
</div>
</section>
</div>
SASS:
#connect-us
padding: 80px 0
background-color: $darkviolet2
text-align: center
position: relative
width: 100%
transform: skewY(-4deg)
.content-wrapper
+transform(skew(0deg, 4deg))
根据您的 HTML 代码,您可以这样做:
CSS
#connect-us {
padding: 80px 0;
background-color: blue;
text-align: center;
position: relative;
width: 100%;
overflow:hidden;
z-index: 1;
}
#connect-us:after {
width: 100%;
content: "";
display: block;
height: 100%;
position: absolute;
top: 10%;
-webkit-transform: skewY(-4deg);
-moz-transform: skewY(-4deg);
-ms-transform: skewY(-4deg);
-o-transform: skewY(-4deg);
transform: skewY(-4deg);
background-color: red;
z-index: 2;
}
.content-wrapper {
position: relative;
z-index: 3;
}
这是一个 jsFiddle,展示了它的外观:
基于负边距、z-index 和 padding 的解决方案
#connect-us
padding: 380px 0 80px
margin-top: -300px
background-color: $darkviolet2
text-align: center
position: relative
+size(100%)
z-index: 1
前一个块的浅紫色代码
#section-id
padding: 80px 0 150px
background: url(../img/bg_packages.png) no-repeat center center
background-size: cover
text-align: center
position: relative
z-index: 10
transform: skewY(-4deg)
我正在尝试创建一个网站,其中的部分使用 css3 transform: skewY(-4deg)
进行转换。在最后一个元素上我遇到了问题,如果我倾斜元素,底部会有一个白色的 space。请提供一些建议来修复它。试过 this 但没有用
HTML:
<section id="connect-us">
<div class="content-wrapper">
<h1>Подключиться очень просто!</h1>
<p>Укажите вашу почту и наш менеджер свяжется с вами в течении дня,а на следующий день ваше заведение будет подключено!</p>
<form action="#">
<input type="text" name="email" placeholder="Ваша почта">
<button class="button button--dark-red" type="submit">Отправить</button>
</form>
<div class="social-belt">
<a href="#" class="icon-facebook-with-circle"></a>
<a href="#" class="icon-twitter-with-circle"></a>
<a href="#" class="icon-linkedin-with-circle"></a>
</div>
<footer>
<div class="copyright">
<span><span class="firm-name">Mimicra 2015™</span> Сделано в <a href="http://cpdbbk.com">cpdbbk.com</a></span>
</div>
</footer>
</div>
</section>
</div>
SASS:
#connect-us
padding: 80px 0
background-color: $darkviolet2
text-align: center
position: relative
width: 100%
transform: skewY(-4deg)
.content-wrapper
+transform(skew(0deg, 4deg))
根据您的 HTML 代码,您可以这样做:
CSS
#connect-us {
padding: 80px 0;
background-color: blue;
text-align: center;
position: relative;
width: 100%;
overflow:hidden;
z-index: 1;
}
#connect-us:after {
width: 100%;
content: "";
display: block;
height: 100%;
position: absolute;
top: 10%;
-webkit-transform: skewY(-4deg);
-moz-transform: skewY(-4deg);
-ms-transform: skewY(-4deg);
-o-transform: skewY(-4deg);
transform: skewY(-4deg);
background-color: red;
z-index: 2;
}
.content-wrapper {
position: relative;
z-index: 3;
}
这是一个 jsFiddle,展示了它的外观:
基于负边距、z-index 和 padding 的解决方案
#connect-us
padding: 380px 0 80px
margin-top: -300px
background-color: $darkviolet2
text-align: center
position: relative
+size(100%)
z-index: 1
前一个块的浅紫色代码
#section-id
padding: 80px 0 150px
background: url(../img/bg_packages.png) no-repeat center center
background-size: cover
text-align: center
position: relative
z-index: 10
transform: skewY(-4deg)