时间戳

首页 > 解决方案 > 对角线分屏图像

css - 对角线分屏图像

问题描述

我试图将图像对角线分割成一半并具有悬停效果。

我在右侧中间图像中遇到的问题不在他的位置上。中心有像那个三角形。

我想要右侧图像就像左侧。

      .wrapper {position:relative;width:100%;height:100vh;font-size:0;overflow:hidden;}
    .half, .half-inner {width:100%;height:100%;display:inline-block;transition:background .2s ease-in;}
    .half-inner {width:200%;}
    .half.left {overflow:hidden;position:absolute;left:-50%;background:rgba(255,255,255,.75);}
    .half.left .half-inner {background:url('https://wallpaperaccess.com/full/1782498.jpg');background-position-x:calc(100vw + 50%);background-position-y:0;}
    .half.right {overflow:hidden;position:absolute;left:50%;background:rgba(0,0,0,.75)}
    .half.right .half-inner {background:url('https://i.pinimg.com/originals/48/40/17/4840177605d6376d5566e79b130f0693.jpg');background-position-x:calc(100vw + 50%);background-position-y:0;}
    .half {transform:skew(-15deg)}
    .half-inner {transform:skew(15deg)}
    .half-inner:before {content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.75);transition:background .2s ease-in;}
    .half:hover .half-inner:before {background:rgba(0,0,0,.55)}
    .half.right:hover {background:rgba(0,0,0,.55)}
    .half.left:hover {background:rgba(255,255,255,.75)}
    .button {position:relative;font-size:16px;font-family:oswald;font-weight:700;display:inline-block;padding:0 50px 0 25px;height:51px;width:80px;text-decoration:none;text-align:center;line-height:51px;text-transform:uppercase;position:absolute;top:calc(50% - 20px)}
    .button.left {background:rgba(255,255,255,.75);color:#000;}
    .button.right {background:rgba(0,0,0,.75);color:#fff;}
    .button:before, .button:after {content: "";    display: block;    position: absolute;    top: 0;    right: 0;}
    .button:before {    border-right: 51px solid #777777;    border-bottom: 51px solid transparent;    opacity: 0.25;}
    .button:after {    border-right: 51px solid #EEE;    border-top: 51px solid transparent;    opacity: 0.3;}
    .left .button {left:calc(75vw - 50px);}
    .right .button {left:calc(25vw - 50px);}
    <main class='wrapper'>
      <section class='half left'>
        <section class='half-inner'>
          <a class='button left' href='#'>Codepen</a>
        </section>
      </section>
      <section class='half right'>
        <section class='half-inner'>
          <a class='button right' href='#'>Github</a>
        </section>
      </section>
    </main>

标签： css

解决方案

请改用剪辑路径。这是一个基本示例，我只保留了相关样式（您可以轻松添加悬停效果和按钮样式）

.wrapper {
  height: 100vh;
  display: flex;
}

.wrapper section {
  flex: 1;
  display: flex;
}

.wrapper section .button {
  margin: auto;
  font-size:20px;
  padding: 10px 15px;
  background: #000;
  color: #fff;
}

.wrapper section:first-child {
  background: url(https://picsum.photos/id/1016/800/800) center/cover;
}

.wrapper section:last-child {
  margin-left: -10vw;
  clip-path: polygon(10vw 0, 100% 0, 100% 100%, 0 100%);
  background: url(https://picsum.photos/id/1064/800/800) center/cover;
}

body {
  margin: 0;
}
<main class='wrapper'>
  <section>
    <a class='button' href='#'>Codepen</a>
  </section>
  <section>
    <a class='button' href='#'>Github</a>
  </section>
</main>

推荐阅读