css - 如何创建带有对 Angular 线(或倾斜的)顶线的 div

Question

我是 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.

Answer 1

首先我认为这可以用 CSS 三 Angular 形来完成，但我不太清楚如何使一个向下的右指向三 Angular 形的宽度为 100%，所以我转向另一个选项...

您可以像现在一样继续使用旋转技术，但是在绿色部分的底部添加一些填充，然后使用负边距底部使页脚回到对 Angular 线上。如果您随后将页脚设置为相对，它应该位于绿色的顶部，这样您就不会看到对 Angular 线。

我在实际站点上对此进行了测试，发现我需要将填充添加到 footer-top 内的 container 并将负边距放在 footer -顶部。否则，填充会导致主体底部出现间隙。

难以用语言描述，所以这里是片段。

#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>