Как вырезать деление по горизонтали и диагонали - PullRequest
Новая
       12

Как вырезать деление по горизонтали и диагонали

0 голосов
/ 03 декабря 2018

У меня проблема с моим кодом CSS.Я хотел бы добиться чего-то вроде этого: (извините за мои плохие навыки рисования), используя CSS и Bulma.У меня проблема с исчезновением div на белом фоне.А также, знаете ли вы какие-нибудь хорошие сайты, где я мог бы искать некоторые идеи?Я надеюсь, что вы, ребята, можете мне помочь!Спасибо!:) Вот мой код: 

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
        <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
        <!-- <link rel="stylesheet" href="debug.css"> -->
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <section class="hero is-fullheight" id="herobg">
                 <nav class="navbar is-white" id="navbg">
                    <div class="container">
                      <div class="navbar-brand">
                        <a class="navbar-item" href="#" style="font-weight:bold;">
                          <img src="logotest.png" class="image is-48x48">
                        </a>
                        <span class="navbar-burger burger" data-target="navMenu">
                          <span></span>
                          <span></span>
                          <span></span>
                        </span>
                        </div>
                      <div id="navMenu" class="navbar-menu">
                        <div class="navbar-end">
                          <a href="#" class="navbar-item">Strona główna</a>
                          <a href="#" class="navbar-item">Zdjęcia</a>
                          <a href="#" class="navbar-item">Lokalizacja</a>
                          <a href="#" class="navbar-item">Kontakt</a>
                        </div>
                      </div>
                    </div>
                  </nav>
                        <div class="hero-body">
                            <div class="container has-text-centered">
                                <h1 class="title">
                                    Lawendowe Apartamenty
                                </h1>
                                <h2 class="title">
                                    Zapraszamy
                                </h2>
                            </div>
                        </div>
                        <section class="hero-body is-overlay is-pulled-right" id="sliced">
                        </section>
        </section>


        <script type="text/javascript">
            (function() {
                var burger = document.querySelector('.burger');
                var nav = document.querySelector('#'+burger.dataset.target);
                burger.addEventListener('click', function(){
                    burger.classList.toggle('is-active');
                    nav.classList.toggle('is-active');
                });
            })();
        </script>
    </body>
</html>





html,
body
{
    height: 100%;
}

html {
  scroll-behavior: smooth;
}

#herobg {
  background: url(background.jpg) no-repeat;
  background-position: center;
  background-size: cover;
}

#navbg {
  color: black;
}

#sliced {
  background-color: white;
  height: 100%;
  width: 70%;
  left: 100%;
  top: 50%;
  transform: translate(-100%, -50%);
}

Ответы [ 3 ]

0 голосов
/ 03 декабря 2018

Вот метод, использующий некоторый шикарный css треугольник код:

  1. Поместите изображение в героя.Сделайте героя position: relative, чтобы содержащиеся элементы могли быть position: absolute в нужных местах.
  2. Создайте треугольник, который накладывается на изображение.Это элемент .mask в приведенном ниже примере.
  3. Создайте еще один слой, перекрывающий треугольник, с текстом, который вы хотите отобразить.Это элемент .info.

Вот кодекс: https://codepen.io/c_bergh/pen/qQvGzy

ПРИМЕЧАНИЕ. Запустите фрагмент в представлении «полная страница», чтобы увидеть полный эффект

body,
html {
  margin: 0;
  padding: 0;
}

.hero {
  position: relative;
  margin: 0;
  padding: 0;
}

.hero img {
  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: 100%;
  height: 500px;
}


/* 
   white overlay
   positioned absolute to properly cover the whole image
   NOTE: the bottom border has to be set to equal the image height, and unfortunately % is not supported :(
   
*/

.hero .mask {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  /*
     Create the triangle overlay
     see https://css-tricks.com/the-shapes-of-css/#article-header-id-11
  */
  border-bottom: 500px solid white;
  border-left: 100vw solid transparent;
}


/*
    Test message overlay 
    You may need to fiddle with width, height, and bottom to get the desired result.
    You may consider using "transform: translateY(-50%);" or similar if the amount of text varies
*/

.hero .info {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 175px;
  width: 50vw;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
<div class="hero">
  <img src="https://via.placeholder.com/1250x500">
  <div class="mask"></div>
  <div class="info">Welcome Message.</div>
</div>
0 голосов
/ 03 декабря 2018

Я хотел бы рассмотреть несколько фонов для достижения этого, а затем просто выровнять текст на белой части: 

.container {
 height:100vh;
 background:
  linear-gradient(to bottom right, transparent 49.8%,#fff 50%),
  url(https://picsum.photos/800/600?image=1069) center/cover;
}

.container p {
  max-width:40%;
  height:100%;
  display:flex;
  align-items:center;
  margin:0 0 0 auto;
}

body {
 margin:0;
}
<div class="container">
  <p>lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem </p>
</div>
0 голосов
/ 03 декабря 2018

Исходя из ваших попыток CSS, вы движетесь в правильном направлении.Вы можете использовать CSS, чтобы вырезать диагональную форму заранее определенной формы или использовать пользовательский SVG.Я лично выбрал простой способ использования CSS для создания своих проектов.Для вашего примера вам в основном нужен треугольник и вершина его вершины, указывающая на правый нижний угол.В качестве альтернативы вы можете использовать Прямоугольник и настроить область как Абсолют, чтобы она могла свободно перемещаться.Ниже я создал для вас простую демонстрацию, но это требует гораздо большего внимания, если вы стремитесь к отзывчивости.Измените значения и посмотрите результат. 

.container {
    width:200px;
    height:200px;
    background-color:red;
    position:relative;
    overflow:hidden;
}

.box {
    position: absolute;
    height: 150px;
    width: 300px;
    background-color: #7ed40c;
    bottom: -30px;
    transform: rotate(-50deg);
    right:-100px
}
<div class="container">
  <div class="box"></div>
</div>
...