Question

当我倾斜一个div，所以边界是一个角度而且不会扭曲伪元素，所以背景不会偏斜，边框不再倾斜，因为背景是绝对的位置，当我溢出时 - y：隐藏在div两侧是一个角度，但我希望右侧只有一个角度...我使用一个容器，所以我不能使用绝对位置并留0，因为它会卡在de container ... 你能救我吗？

＆＃13;

#home-choose-homepage-desktop .btn-primary {
  display: inline-block;
}

#home-choose-homepage-desktop .grid-container,
#home-choose-homepage-desktop .grid-x {
  height: 100%;
}

#home-choose-homepage-desktop {
  height: 30rem;
  position: relative;
  overflow: hidden;
}

#home-choose-homepage-desktop p {
  color: #FFF;
}

#home-choose-homepage-desktop .cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: skew(-20deg);
}

#home-choose-homepage-desktop div.cell:before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 205%;
  z-index: -1;
  transform: scale(1.01) skew(20deg);
}

#home-choose-homepage-desktop .choose-detacheringen:before {
  left: 0;
  background: linear-gradient( rgba(32, 43, 62, .7), rgba(32, 43, 62, .7)), url('img/bg-detacheringen.jpg') no-repeat left center / cover;
  left: -100%;
  transition: .5s ease-out;
}

#home-choose-homepage-desktop .choose-detacheringen:hover:before {
  left: -75%;
}

#home-choose-homepage-desktop .choose-opleidingen:before {
  right: 0;
  background: linear-gradient( rgba(32, 43, 62, .7), rgba(32, 43, 62, .7)), url('img/bg-opleidingen.jpg') no-repeat right center / cover;
  right: -100%;
  transition: .5s ease-out;
}

#home-choose-homepage-desktop .choose-detacheringen:hover {
  z-index: 1;
}

#home-choose-homepage-desktop .choose-opleidingen:hover {
  z-index: 1;
}

#home-choose-homepage-desktop .choose-opleidingen:hover:before {
  right: -75%;
}

#home-choose-homepage-desktop .blurred::before {
  filter: blur(4px);
  width: 175%!important;
}

#home-choose-homepage-desktop .blurred .home-choose-inner {
  filter: blur(4px);
}

#home-choose-homepage-desktop .choose-deatcheringen:hover+div:before {
  width: 173.8% !important;
  transition: .5s ease-out;
}

#home-choose-homepage-desktop .choose-opleidingen {
  text-align: right;
  padding-left: 10%;
}

#home-choose-homepage-desktop .choose-detacheringen {
  padding-right: 10%;
}

#home-choose-homepage-desktop h1 {
  margin-bottom: .2rem;
  color: white;
}

.home-choose-inner {
  margin-top: 10%;
  transform: skew(20deg)
}

＆＃13;

<section id="home-choose-homepage-desktop" class="hide-for-small-only">
  <div class="grid-container grid-container-padded">
    <div class="grid-x grid-margin-x">
      <div class="cell medium-6 choose-detacheringen">
        <div class="home-choose-inner">
          <h1>Detacheringen</h1>
          <p>Gedreven door passie, energiek en met brede ervaring in de detacheringswereld, dat zijn wij! Voor mensen die energie krijgen en plezier hebben in hun werk!</p>
          <a href="detacheringen-home.html" class="btn btn-primary">Meer weten</a>
        </div>
      </div>
      <div class="cell medium-6 choose-opleidingen">
        <div class="home-choose-inner">
          <h1>Opleidingen</h1>
          <p>SOSV geeft praktisch toepasbare opleidingen, face-to-face, in heel Nederland. Mét ervaren docenten die begrijpen wat er écht speelt. We zijn gedreven, vindingrijk én ervaren.</p>
          <a href="#" class="btn btn-primary">Meer weten</a>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

This is how it supposed to look like

The website I am working on

Answer 1

歪斜哪张图片在前面。

export MAKEFLAGS='-j2'

[ -d build ] || mkdir build
cd build

cmake3 .. \
-DCMAKE_INSTALL_PREFIX=#{prefix_dir} \
-DWITH_JPEG=ON \
-DWITH_ZLIB=ON \
-DWITH_PROJ4=ON \
-DPROJ4_INCLUDE_DIR:PATH=#{prefix_dir}/include \
#{}-DPROJ4_LIBRARY:FILEPATH=#{prefix_dir}/lib/libproj.so 
-DPROJ4_LIBRARY:FILEPATH=/usr/lib64/libproj.so 
make && make install

CSS3 Transform Skew One Side http://jsfiddle.net/diegoh/mXLgF/1154/

歪斜div，不加思索的伪元素背景

1 个答案: