如何使用 CSS / Bootstrap 3 制作斜線

Question

我怎樣才能用斜線制作這樣的頁面？

例如，我可以將角度設為 20 度嗎？ 我必須放3個div？

現在我把第一個 div 放在中間一個標志，然后我把導航欄和我希望導航欄與斜線上方的角度對齊。 我必須在引導程序 3 上工作，我有點迷茫。 非常感謝您的幫助和解釋

<div class="container" style="background-color: #04342E; width:100%">
            <img class="img-responsive center-block" style="height: 600px; align-items: center;"; src="/i/gp-logo.png" />
 <nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
                <ul class="nav navbar-nav" style="text-decoration: none">
                    <li class="nav-item">
                      <a class="nav-link active" href="#" style="color: white;">Accueil</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Tableaux</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Papeterie</a>
                    </li>
                     <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Book</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">A propos</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Contact</a>
                    </li>
                </ul>
            </nav>
            <div>   
        </div> 
      </div>

Answer 1

您可以使用我建議使用的clip-path創建 div： https : //bennettfeely.com/clippy/

要么使用帶有線性漸變的背景。

帶剪輯路徑的演示：

 body{ background: #04342E; margin:0; } div.polygon{ height: 100vh; width: 100vw; background: white; clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 75%); display:flex; } .content{ height: 50%; width: 100%; background-color:rgba(255,0,0,0.3); /** Just used to show the written area But it should be removed **/ margin:auto; }

 <div class="polygon"> <div class="content"> Lorem ipsum </div> </div>

Answer 2

 .container { background-color: #04342E; width: 100%; height: 500px; position: relative; } .container::after { position: absolute; content: ""; left: 0px; right: 0px; bottom: 0px; border-bottom: solid white 500px; transform-origin: bottom right; transform: skew(1000deg); } .container #content { background-color: #04342E; width: 100%; height: 500px; margin-top: 600px; position: relative; } .container #content::after { position: absolute; content: ""; top: 0px; right: 0px; left: 0px; border-top: solid white 500px; transform-origin: top left; transform: skew(-1000deg); }

 <div class="container"> <img class="img-responsive center-block" style="height: 100px; align-items: center;" ; src="./images/image 5.png" /> <nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;"> <ul class="nav navbar-nav" style="text-decoration: none"> <li class="nav-item"> <a class="nav-link active" href="#" style="color: white;">Accueil</a> </li> <li class="nav-item"> <a class="nav-link" href="#" style="color: white;">Tableaux</a> </li> <li class="nav-item"> <a class="nav-link" href="#" style="color: white;">Papeterie</a> </li> <li class="nav-item"> <a class="nav-link" href="#" style="color: white;">Book</a> </li> <li class="nav-item"> <a class="nav-link" href="#" style="color: white;">A propos</a> </li> <li class="nav-item"> <a class="nav-link" href="#" style="color: white;">Contact</a> </li> </ul> </nav> <div id="content"> </div> </div>

you can use psuedo classes in css to create this. see above for the code.