时间戳

首页 > 解决方案 > 无法在对角分割的 html 页面中显示图像。请检查代码并让我知道问题

html - 无法在对角分割的 html 页面中显示图像。请检查代码并让我知道问题

问题描述

我创建了一个对角分割的 HTML 页面。我将图像放在右侧，将一些内容和按钮放在左侧。但是我的代码面临 2 个问题

1- 右侧未固定，图像无法正常显示。2-整页不会发生拆分

代码在这里： -

HTML:-

body {
  margin: 0;
  font-size: 2em;
}

#landing-area {
  width: 100vw;
  height: 100vh;
  display: flex;
}

#box-left {
  width: 50%;
  clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
  margin-right: -4.2vh;
  padding: 5px 11vh 5px 5px;
  background-color: #F4FCFF;
  text-align: center;
}

#box-right {
  width: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
  margin-left: -4.2vh;
  padding: 5px 5px 5px 11vh;
  text-align: center;
}

#middle-text {
  height: 200px;
  width: 400px;
  position: fixed;
  top: 50%;
  left: 25%;
  margin-top: -100px;
  margin-left: -200px;
}
<body>
  <div id="landing-area">
    <div id="box-left">
      <div id="middle-text">
        <img src="images/logo.png">
        <h>Header goes here</h>
        <p>4 line paragraph goes here</p>
        <button>Button name</button></div>
    </div>
    <div id="box-right">
      <img src="images/landingPage.png">
    </div>
  </div>
</body>

图片：-

在此处输入图像描述

我希望页面应该如下所示 在此处输入图像描述

标签： htmlcss

解决方案

您可以从 codepen 查看代码。访问https://codepen.io/chris22smith/pen/vvYBGY

HTML:-

<body>
<div class="view">
  <div class="left">
    <div class="sun"></div>
  </div>
  <div class="divider"></div>
  <div class="right">
    <div class="moon"></div>
  </div>
</div>
</body>

CSS：-

body {
  overflow:hidden;
}

.view {
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0;
  transform:skew(-10deg);
}

.left,
.right {
  bottom:0;
  overflow:hidden;
  position:absolute;
  top:0;
}

.left { 
  left:-5%;  
  right:50%;  
}

.divider {
  background-color:#fc0;
  border-left:solid 2px #000;
  border-right:solid 2px #000;
  bottom:-5%;
  left:50%;
  position:absolute;
  right:50%;
  top:-5%;
  z-index:1;
}

.right {
  left:50%;
  right:-5%;
}

.sun,
.moon {
  bottom:-5%;
  left:-5%;
  position:absolute;
  right:-5%;
  top:-5%;
  transform:skew(5deg);
}

.sun {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/sun.jpg);
  background-position:center center;
  background-size:cover;
}

.moon {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/moon.jpg);
  background-position:center center;
  background-size:cover;
}

推荐阅读