如何创建一个带有斜线（或倾斜）顶部的div

Question

如何创建一个带有斜线（或倾斜）顶部的div

csshtmlanglediagonal

8

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

- bibifont

您不能独立旋转元素的边框，而不影响元素本身。 - Diodeus - James MacFarlane

这个SO问题可能会有所帮助（特别是最后一个答案的评论 - http://jsfiddle.net/py9Ze/2/）：http://stackoverflow.com/questions/17595097/css-border-rotation - lebolo

2个回答

-2

你可以尝试使用 CSS 渐变来实现这个效果。我在我的网站闪屏页上做了类似的事情：

http://agency89ninety.com

上述网站的斜角背景纯粹是CSS3渐变（当然还有回退）

这是通过创建一个渐变来实现的，从0％开始，颜色为灰色，到50％时颜色仍然是灰色，然后再从50％开始另一个渐变，颜色为深灰色，并以颜色为深灰色结束到100％。

基本上，您正在欺骗系统。从技术上讲，它是一种渐变，但看起来像两个实心颜色在中间相遇并倾斜。

查看此网站以了解CSS渐变属性的更多信息：

http://www.css3files.com/gradient/

- Mike Legacy

谢谢你的回答！！我会看一下并告诉你 :)。 - bibifont

3

这个给出的链接似乎不再相关。 - meles

因为链接不再相关，所以被踩了。请使用StackOverflow的内联编辑器创建一个代码片段。 - Sgnl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidpauljunior · Accepted Answer

一开始我认为这可以通过使用CSS三角形来完成，但我无法确定如何使向右下方的倒三角形成为100％宽度，因此我选择了另一种选项...

您可以继续使用旋转技术，但是在绿色部分底部添加一些填充，并使用负值的margin-bottom将页脚上移并覆盖斜线。如果然后将页脚设置为相对位置，它应该位于绿色部分的顶部，因此您看不到对角线。

我在实际网站上测试了这个方法，并发现需要将填充添加到footer-top内的container中，并在footer-top上放置负边距。否则，填充将导致body底部出现间隙。



很难用言语来描述，所以这里是代码。



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