如何使用对角线(或倾斜)顶线创建 div
[英] How to create a div with a diagonal (or angled) top line
本文介绍了如何使用对角线(或倾斜)顶线创建 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 CSS3 的新手，我所知道的都是自学，阅读你们或任何其他教程，所以经过数小时的研究和试错后，我真的可以使用你们的帮助 :(.
我正在尝试仅旋转 div 的顶行.这是我到目前为止所做的:
http://blanc-design.com/sigma2/
在页脚上，我旋转了两个 div 来创建这种效果.但我想要做的是在绿色 div 上有一个直线底线.这是我希望它成为的一个例子:
http://blanc-design.com/sigma2/ex.jpg
我不知道我的解释是否正确.这是我用来旋转 div 的 CSS 代码:
#footer-top {颜色:#fff;填充:35px 0 15px；变换:旋转(2度)缩放(1)倾斜(3度)平移(0像素)；-webkit-变换:旋转(2度)缩放(1)倾斜(3度)平移(0像素)；-moz-变换:旋转(2度)scale(1) skew(3deg) translate(0px);-o-transform:rotate(2deg) scale(1)skew(3deg) translate(0px);-ms-transform:rotate(2deg) scale(1)skew(3deg)平移(0px)；}#页脚空间{填充:0 0 6px；}#footer-top2 {颜色:#fff;背景颜色:rgba(20, 122, 188, 0.5);背景:RGBA(20, 122, 188, 0.5);颜色:RGBA(20, 122, 188, 0.5);填充:6px 0 12px；高度:2px；变换:旋转(358度)缩放(1)倾斜(0度)平移(0像素)；-webkit-变换:旋转(358度)缩放(1)倾斜(0度)平移(0像素)；-moz-变换:旋转(358度)scale(1) skew(0deg) translate(0px);-o-transform: 旋转(358deg) scale(1) skew(0deg) translate(0px);-ms-transform:rotate(358deg) scale(1) skew(0deg) 翻译 (0px);}#footer-top3 {颜色:#fff;背景颜色:rgba(128, 185, 46, 0.7);背景:RGBA(128, 185, 46, 0.7);颜色:RGBA(128, 185, 46, 0.7);变换:旋转(358度)缩放(1)倾斜(-2度)平移(0像素)；-webkit-transform:旋转(358度)缩放(1)倾斜(-2度)平移(0像素)；-moz-transform:旋转(358度)缩放(1)倾斜(-2度)平移(0像素)；-o-变换:旋转(358度)缩放(1)倾斜(-2度)平移(0像素)；-ms-transform:旋转(358度)缩放(1)倾斜(-2度)平移(0像素)；}
这是 HTML:
<div id="footer-top2"></div><div id="footer-space"></div><div id="footer-top3"><div id="footer-top"><div class="container clearfix"><div class="四分之一"><div class="widget twitter-widget"><h3>Últimos 推文</h3><div class="tweet"></div>
<div class="四分之一"><div class="widget twitter-widget"><h3>Facebook Feed<div class="tweet"></div>
<div class="四分之一"><div class="widget twitter-widget"><h3>照片和 Instagram</h3><div class="tweet"></div>
<div class="第四列最后一个"><div class="widget contact-info"><h3>Contacto</h3>
地址在这里
如果你们能帮助我，我将不胜感激！！
提前致谢.
b.
解决方案
起初我认为这可以用 CSS 三角形来完成，但我不太清楚如何使右下三角形的宽度为 100%，所以我转向了另一个选择...
您可以继续使用旋转技术，然后在绿色部分的底部添加一些填充，然后使用负边距底部将页脚重新向上并越过对角线.如果您随后将页脚设置为相对，它应该位于果岭的顶部，这样您就不会看到对角线.
我在实际网站上测试了这个，发现我需要在 footer-top 内的 container 中添加填充，并在 footer 上放置负边距-顶.否则，padding 会导致 body 底部出现间隙.
难以用语言描述，所以这里是片段.
#footer-top {颜色:#fff;填充:35px 0 15px；变换:旋转(2度)缩放(1)倾斜(3度)平移(0像素)；-webkit-变换:旋转(2度)缩放(1)倾斜(3度)平移(0像素)；-moz-变换:旋转(2度)scale(1) skew(3deg) translate(0px);-o-transform:rotate(2deg) scale(1)skew(3deg) translate(0px);-ms-transform:rotate(2deg) scale(1)skew(3deg)平移(0px)；底边距:-20px；/* 添加 */}/* 添加 */#footer-top .container {填充底部:20px；}#页脚空间{填充:0 0 6px；}#footer-top2 {颜色:#fff;背景颜色:rgba(20, 122, 188, 0.5);背景:RGBA(20, 122, 188, 0.5);颜色:RGBA(20, 122, 188, 0.5);填充:6px 0 12px；高度:2px；变换:旋转(358度)缩放(1)倾斜(0度)平移(0像素)；-webkit-变换:旋转(358度)缩放(1)倾斜(0度)平移(0像素)；-moz-变换:旋转(358度)scale(1) skew(0deg) translate(0px);-o-transform: 旋转(358deg) scale(1) skew(0deg) translate(0px);-ms-transform:rotate(358deg) scale(1) skew(0deg) 翻译 (0px);}#footer-top3 {颜色:#fff;背景颜色:rgba(128, 185, 46, 0.7);背景:RGBA(128, 185, 46, 0.7);颜色:RGBA(128, 185, 46, 0.7);变换:旋转(358度)缩放(1)倾斜(-2度)平移(0像素)；-webkit-transform:旋转(358度)缩放(1)倾斜(-2度)平移(0像素)；-moz-transform:旋转(358度)缩放(1)倾斜(-2度)平移(0像素)；-o-变换:旋转(358度)缩放(1)倾斜(-2度)平移(0像素)；-ms-transform:旋转(358度)缩放(1)倾斜(-2度)平移(0像素)；}#页脚底部{颜色:#808080；背景色:#2D2D2D；字体大小:0.916em；填充:30px 0;边框顶部:1px 实心 #000；box-shadow: 0 4px 4px rgba(0,0,0,0.2) 插入；位置:相对；/* 添加 */}
<div id="footer-top2"></div><div id="footer-space"></div><div id="footer-top3"><div id="footer-top"><div class="container clearfix"><div class="四分之一"><div class="widget twitter-widget"><h3>Últimos 推文</h3><div class="tweet"></div>
<div class="四分之一"><div class="widget twitter-widget"><h3>Facebook Feed<div class="tweet"></div>
<div class="四分之一"><div class="widget twitter-widget"><h3>照片和 Instagram</h3><div class="tweet"></div>
<div class="第四列最后一个"><div class="widget contact-info"><h3>Contacto</h3>
地址在这里
<div id="footer-bottom"><div class="container clearfix">页脚内容
I'm a newbie on CSS3 and all I know is self-learned, reading you guys or any other tutorials so after hours of researching and trial-error, I could really use your help :(.
I'm trying to rotate JUST the top line of a div. This is what I did so far:
http://blanc-design.com/sigma2/
On the footer, I have rotate two divs to create that effect. But what I want to do is to have a straight bottom line on the green div. This is an example of how I would like it to be:
http://blanc-design.com/sigma2/ex.jpg
I don't know if I'm explaining myself right. This is the CSS code I've used to rotate the divs:
#footer-top {
color: #fff;
padding: 35px 0 15px;
transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-webkit-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-o-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-ms-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);
}
#footer-space {
padding: 0 0 6px;
}
#footer-top2 {
color: #fff;
background-color: rgba(20, 122, 188, 0.5);
background: rgba(20, 122, 188, 0.5);
color: rgba(20, 122, 188, 0.5);
padding: 6px 0 12px;
height: 2px;
transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-webkit-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-moz-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-o-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-ms-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);
}
#footer-top3 {
color: #fff;
background-color: rgba(128, 185, 46, 0.7);
background: rgba(128, 185, 46, 0.7);
color: rgba(128, 185, 46, 0.7);
transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-webkit-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-moz-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-o-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-ms-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
}
And this is the HTML:
<div id="footer-top2"></div>
<div id="footer-space"></div>
<div id="footer-top3">
<div id="footer-top">
<div class="container clearfix">
<div class="one-fourth">
<div class="widget twitter-widget">
<h3>Últimos Tweets</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth">
<div class="widget twitter-widget">
<h3> Facebook Feed</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth">
<div class="widget twitter-widget">
<h3>Fotos en Instagram</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth column-last">
<div class="widget contact-info">
<h3>Contacto</h3>
<div>address here
</div>
</div>
</div>
</div>
</div>
</div>
If any of you could help me I will be very grateful!!
Thanks in advance.
b.
解决方案
First I thought this could be done with CSS triangles, but I can't quite work out how to make a downward right pointing triangle be 100% width, so I moved on to another option...
You could keep using the rotation technique as you are doing, but then add some padding to the bottom of the green part, and then use a negative margin-bottom to bring the footer back up and over the diagonal. If you then set the footer to relative, it should sit over the top of the green so you won't see the diagonal line.
I tested this on the actual site and found that I need to add the padding to the container inside footer-top and put the negative margin on footer-top. Otherwise, the padding would cause a gap at the bottom of the body.
Hard to describe in words, so here's the snippet.
#footer-top {
color: #fff;
padding: 35px 0 15px;
transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-webkit-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-o-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-ms-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);
margin-bottom: -20px; /* Added */
}
/* Added */
#footer-top .container {
padding-bottom: 20px;
}
#footer-space {
padding: 0 0 6px;
}
#footer-top2 {
color: #fff;
background-color: rgba(20, 122, 188, 0.5);
background: rgba(20, 122, 188, 0.5);
color: rgba(20, 122, 188, 0.5);
padding: 6px 0 12px;
height: 2px;
transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-webkit-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-moz-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-o-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-ms-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);
}
#footer-top3 {
color: #fff;
background-color: rgba(128, 185, 46, 0.7);
background: rgba(128, 185, 46, 0.7);
color: rgba(128, 185, 46, 0.7);
transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-webkit-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-moz-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-o-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-ms-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
}
#footer-bottom {
color: #808080;
background-color: #2D2D2D;
font-size: 0.916em;
padding: 30px 0;
border-top: 1px solid #000;
box-shadow: 0 4px 4px rgba(0,0,0,0.2) inset;
position: relative; /* Added */
}
<div id="footer-top2"></div>
<div id="footer-space"></div>
<div id="footer-top3">
<div id="footer-top">
<div class="container clearfix">
<div class="one-fourth">
<div class="widget twitter-widget">
<h3>Últimos Tweets</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth">
<div class="widget twitter-widget">
<h3> Facebook Feed</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth">
<div class="widget twitter-widget">
<h3>Fotos en Instagram</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth column-last">
<div class="widget contact-info">
<h3>Contacto</h3>
<div>address here
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer-bottom">
<div class="container clearfix">
Footer content
</div>
</div>
这篇关于如何使用对角线(或倾斜)顶线创建 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
