html - 如何使用偏斜属性

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 />
<div class="wrapper">
    <div class="wrapper-inner">
        <div class="content-wrapper">
            <p> Lorem ipsum ...</p>
        </div>
    </div>
</div>

Answer 1

更新:

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

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

并倾斜这个 div 并将它定位为相对于包装器的绝对位置

这样就可以达到如图的效果，不用担心wrapper的内容歪斜了。

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>