如何使用skew属性

Question

我想尝试这样的事情：

我的css3样式不是最好的样式之一，但正在运行的代码片段是我尝试的内容，我甚至无法正确看到内容。

请帮助。

.wrapper{
  max-width: 600px;
  margin: 0 auto;
}
.wrapper-inner{
  background: red;
  position: relative;
  width: 100%;
  
}

.wrapper-inner:before{
  position: absolute;
    content: '';
    background-color: red;
    top: -6px;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transform: skewY(1.5deg);
    -ms-transform: skewY(1.5deg);
    transform-origin: right top;
}

<div class="top">
<h1>HEADING 1</h1>
</div>
<element></element>
<div class="wrapper">
  <div class="wrapper-inner">
    
      <div class="content-wrapper">
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, commodi maiores quo ex molestiae perferendis ducimus suscipit sequi officia earum asperiores consectetur illo minus similique, rem accusamus assumenda quae! Corporis!</p>
      </div>
   
  </div>


</div>

Answer 1

<强>更新

正如您所提到的，您只希望div的右上角倾斜。最好的方法是在包装器中添加一个div

<div class="top"></div>
<div class="wrapper">
  <div class="skew"></div>
   ....
</div>

并将此div倾斜并将其相对于包装器绝对定位

通过这种方式，您可以获得图像中显示的效果，而无需担心包装器的内容是否倾斜。

<强> CSS

.skew{
  position: absolute;
  background-color: #ca3030;
  -webkit-transform: skewY(1deg);
  -ms-transform: skewY(1deg);
  transform: skewY(1deg);
  transform-origin: right top;
  top: 0px;
  width: 100%;
  height: 25px;
  left: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index:0;
}

在此查看更新后的代码：

.top {
  width: 100%;
  height: 50px;
  background-color: blue;
}

.wrapper {
  position: relative;
  top: -25px;
  background-color: #ca3030;
  max-width: 90%;
  margin: 0 auto;
  border-radius: 8px;
  border-top-left-radius: 0px;
  z-index:1;
}

.skew {
  position: absolute;
  background-color: #ca3030;
  -webkit-transform: skewY(1deg);
  -ms-transform: skewY(1deg);
  transform: skewY(1deg);
  transform-origin: right top;
  top: 0px;
  width: 100%;
  height: 25px;
  left: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index:0;
}

.wrapper {
  padding: 10px 20px;
}

.content-wrapper {
  color: white;
  margin: 5% 2%;
}

.content-wrapper .head {
  font-size: 1em;
}

.content-wrapper .sub-head {
  font-size: 0.8em;
}

.anchor {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #ca3030;
  position: absolute;
  bottom: -9px;
  left: 45%;
}

<div class="top"></div>
<div class="wrapper">
  <div class="skew"></div>
  <div class="wrapper-inner">
    <div class="content-wrapper">
      <p class="head"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, commodi maiores quo ex molestiae accusamus assumenda quae! Corporis!</p>
      <p class="sub-head">
        perferendis ducimus suscipit sequi officia earum asperiores consectetur illo minus similique, rem
      </p>
    </div>
    <div class="anchor"></div>
  </div>

</div>