我是 CSS3 的新手，我所知道的都是自学，阅读你们或任何其他教程，所以经过数小时的研究和试错后，我真的可以使用你们的帮助 :(.
我正在尝试仅旋转 div 的顶行.这是我到目前为止所做的:
blanc-design/sigma2/
在页脚上，我旋转了两个 div 来创建这种效果.但我想要做的是在绿色 div 上有一个直线底线.这是我希望它成为的一个例子:
blanc-design/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:
blanc-design/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:
blanc-design/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>