html - 如何水平和对角切割div

问题描述

我的 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%);
}

标签： htmlcssbulma

我会考虑使用多个背景来实现这一点，然后只需将文本对齐白色部分：

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

html - 如何水平和对角切割div

问题描述

解决方案

推荐阅读