我是CSS3的新手,所有的知识都是自学的,通过阅读教程和其他人的经验。在经过多次尝试和研究后,我真的需要你的帮助:(。
我想要旋转一个div的顶部边框,这是我目前所做的:
http://blanc-design.com/sigma2/
在页脚中,我已经旋转了两个div来创建这种效果。但我想要在绿色的div上有一条直线底边。这是我想要的效果示例:
http://blanc-design.com/sigma2/ex.jpg
我不知道我是否解释得清楚。这是我用来旋转div的CSS代码:
#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);
}
以下是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>
如果您能帮助我,我将非常感激!!提前致谢。
b.