CSS的一侧偏斜 [英] one sided skew with css

问题描述

我想创建一个单侧偏斜，但是没有这样做.到目前为止，这是我尝试过的:

I want to create a one sided skew, but failed to do so. here is what I've tried so far:

    .bg-style1 {
      background: #ccc;
      position: relative;
      display: block;
      z-index: 2;
    }
    .bg-style1:after {
      content: " ";
      position: absolute;
      display: block;
      width: 30%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      background: #333333;
      -ms-transform: skew(-30deg, 0deg);
      -webkit-transform: skew(-30deg, 0deg);
      transform: skew(-30deg, 0deg);
    }

<section class="page">
  <div class="bg-style1">
    .....content goes here
  </div>
</section>

，但是它不起作用.外观:

but it is not working. look:

我要完成的任务:

推荐答案

将overflow:hidden添加到.bg-style1规则中，并将transformX(-40%)添加到.bg-style1:after

Add overflow:hidden to your .bg-style1 rule and transformX(-40%) to the transform: in .bg-style1:after

.bg-style1 {
  padding-top: ;
  background: #ccc;
  position: relative;
  display: block;
  z-index: 2;
  overflow: hidden;
}
.bg-style1:after {
  content: " ";
  position: absolute;
  display: block;
  width: 30%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  background: #333333;
  -ms-transform: skew(-30deg, 0deg);
  -webkit-transform: skew(-30deg, 0deg);
  transform: skew(-30deg, 0deg) translateX(-50%);
}

<section class="page">
  <div class="bg-style1">
    <h1>What is lorem ipsum</h1>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</section>

这篇关于CSS的一侧偏斜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！