Css 如何创建具有对角线（或角度）顶线的div

我是CSS3的新手，我所知道的只是自学，阅读你们或任何其他教程，所以经过数小时的研究和尝试，我真的需要你们的帮助：（

我正在尝试旋转一个div的顶行。这是我到目前为止所做的：

在页脚上，我旋转了两个div以创建该效果。但我想做的是在绿色div上有一条直线。这是我希望它是这样的一个示例：

我不知道我的解释是否正确。这是我用来旋转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>

Últimos推特
Facebook订阅源
福托斯Instagram
联系人
地址在这里

如果你们中有人能帮助我，我将非常感激

提前谢谢

---

b、

您可以尝试使用css渐变来实现这一点。我在网站的splashpage上也做了类似的操作：

上述场地上的倾斜背景纯粹是CSS3坡度（当然有后退）

这是通过创建渐变来完成的，从0%开始，颜色为灰色，以50%结束，颜色为灰色，然后从50%开始，颜色为暗灰色，以100%结束，颜色为暗灰色

基本上你是在欺骗这个系统。从技术上讲，它是一个梯度，但是看起来像两个在中间相遇并且成角度的纯色。

查看此网站，了解更多有关css渐变属性的信息：

---

首先，我认为这可以通过CSS三角形来实现，但我不太清楚如何使向下的直角三角形具有100%的宽度，所以我选择了另一个选项

您可以继续使用旋转技术，但在绿色部分的底部添加一些填充，然后使用负边距底部将页脚向上移动到对角线上。如果将页脚设置为相对，则页脚应位于绿色部分的顶部，这样您就看不到对角线

我在实际站点上对此进行了测试，发现我需要将填充物添加到

容器
内部
页脚顶部
，并将负边距放置在
页脚顶部
。否则，填充物将导致车身底部出现间隙

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


#页脚顶部{
颜色：#fff；
填充：35px 0 15px；
变换：旋转（2deg）缩放（1）倾斜（3deg）平移（0px）；-webkit变换：旋转（2deg）缩放（1）倾斜（3deg）平移（0px）；-moz变换：旋转（2deg）缩放（1）倾斜（3deg）平移（0px）；-o变换：旋转（2deg）缩放（1）倾斜（3deg）平移（0px）；-ms变换：旋转（2deg）缩放（1）倾斜（3deg）平移（0px）；
保证金底部：-20px；/*已添加*/
}
/*增加*/
#页脚顶部。容器{
垫底：20px；
}
#页脚空间{
填充：0.06px；
}
#页脚-顶部2{
颜色：#fff；
背景色：rgba（20,122,188,0.5）；
背景：rgba（20,122,188,0.5）；
颜色：rgba（20,122,188,0.5）；
填充：6px 0 12px；
高度：2倍；
变换：旋转（358deg）缩放（1）倾斜（0deg）平移（0px）；-webkit变换：旋转（358deg）缩放（1）倾斜（0deg）平移（0px）；-moz变换：旋转（358deg）缩放（1）倾斜（0deg）平移（0px）；-o变换：旋转（358deg）缩放（1）倾斜（0px）；-ms变换：旋转（358deg）缩放（1）倾斜（0px）；
}
#页脚-top3{
颜色：#fff；
背景色：rgba（128,185,46,0.7）；
背景：rgba（128,185,46,0.7）；
颜色：rgba（128,185,46,0.7）；
变换：旋转（358度）缩放（1）倾斜（-2度）平移（0px）；
-webkit变换：旋转（358度）缩放（1）倾斜（-2度）平移（0px）；
-moz变换：旋转（358度）缩放（1）倾斜（-2度）平移（0px）；
-o变换：旋转（358度）缩放（1）倾斜（-2度）平移（0px）；
-ms变换：旋转（358度）缩放（1）倾斜（-2度）平移（0px）；
}
#页脚底部{
颜色：#808080；
背景色：#2d；
字体大小：0.916em；
填充：30px0；
边框顶部：1px实心#000；
盒影：0.4px4pRGBA（0,0,0,0.2）插页；
位置：相对；/*已添加*/
}

Últimos推特
Facebook订阅源
福托斯Instagram
联系人
地址在这里
页脚内容
您无法独立于元素本身旋转元素的边框。因此，这个问题可能会有所帮助（特别是上一个答案的注释-）：谢谢您的回答！！我将看一看并让您知道：）。给定的链接似乎不再相关。由于链接不再相关，因此被否决。请使用stackoverflows内联编辑器创建一个代码段！！！这正是我想要的。你太棒了！！！！非常感谢。我试图给你分数，但我不能，因为我是新来的，但我会尽快得到分数：）。非常感谢！干杯，没有比死链接更令人失望的了。。。（看起来很可能是杰斯宾倒下了）就算这是3年前的事。。。但还是…体育