Как сделать косые линии с помощью CSS / Bootstrap 3

#html #css #twitter-bootstrap-3

#HTML #css #twitter-bootstrap-3

Вопрос:

Как я могу создать такую страницу с наклонными линиями?

Могу ли я поставить угол в 20 градусов, например? Я должен поместить 3 div?

На данный момент я помещаю первый div, чтобы поместить логотип посередине, затем я помещаю панель навигации, и я хотел бы, чтобы панель навигации была выровнена с углом чуть выше наклонной линии. Я должен работать над bootstrap 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>

Ответ №1:

Либо вы можете создать div с clip-path помощью, я бы рекомендовал использовать: https://bennettfeely.com/clippy /

Либо вы используете фон с линейным градиентом.

ДЕМОНСТРАЦИЯ с clip-path:

 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>

1. Большое спасибо за ваш ответ. Могу ли я таким образом добавить содержимое в белую часть?

2. @Kimako Да, вы можете, я отредактировал свой фрагмент, чтобы показать вам, где вы сможете писать (в красной полосе), просто удалите цвет фона. Да, вы можете

3. Ты роооооок! Большое спасибо, правда.

Ответ №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.