web-dev-qa-db-ja.com

斜めの（または角度の付いた）トップラインを持つdivを作成する方法

私はCSS3の初心者であり、私が知っているのは自己学習であり、皆さんや他のチュートリアルを読んでいるので、何時間もの調査と試行錯誤の後で、私は本当にあなたの助けを使うことができます:(。

Divの一番上の行だけを回転させようとしています。これは私がこれまでにしたことです：

http://blanc-design.com/sigma2/

フッターでは、その効果を作成するために2つの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。

csshtmlanglediagonal
7
bibifont

最初はCSSの三角形でこれができると思いましたが、右下向きの三角形を100％の幅にする方法がよくわからないので、別のオプションに移りました...

回転テクニックをそのまま使用することもできますが、緑色の部分の下部にパディングを追加してから、負のマージン下部を使用して、フッターを対角線上に戻します。次にフッターを相対に設定すると、対角線が表示されないように、フッターがグリーンの上に配置されます。

これを実際のサイトでテストしたところ、footer-top内のcontainerにパディングを追加し、footer-topに負のマージンを設定する必要があることがわかりました。そうしないと、パディングによってボディの下部にギャップが生じます。

言葉で説明するのは難しいので、ここにスニペットがあります。

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