Question

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

Answer 1

基于您尝试的CSS，您正在朝着正确的方向前进。您可以使用CSS切割预定义形状的对角线形状，也可以使用自定义SVG。我个人已经采取了使用简单的CSS来创建我的设计的方法。对于您的示例，您基本上需要一个三角形及其顶点指向右下角。或者，您可以使用Rectangle并将该区域调整为Absolute，以便可以自由移动它。我在下面为您创建了一个简单的演示，但是如果您寻求响应能力，这需要更多的关注。更改值并查看结果。

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

Answer 2

这是一种利用一些时髦的css triangle代码的方法：

将图像定位在英雄中。将英雄设为position: relative，以便将包含的元素position: absolute放在正确的位置。
创建一个覆盖图像的三角形。这是下面示例中的.mask元素。
使用要显示的文本创建另一个覆盖三角形的图层。这是.info元素。

这是一个codepen：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>

Answer 3

我会考虑使用多种背景来实现此目的，然后只需将白色部分上的文本对齐：

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

如何水平和对角线切割div

3 个答案: