Question

我正在使用偏斜，但转换也适用于倾斜框内的所有内容，就像我在笔中看到的那样。该段看起来是斜体的。 http://codepen.io/Sidney-Dev/pen/RGXVpb

＆＃13;

class SomeClass
{
public:
    void foo(){}
};

int main()
{
    some_smart_ptr<SomeClass> ptr; // ptr._data is nullptr
    ptr.reset(new SomeClass()); // here we are using the smart pointer object itself. 
    ptr->foo(); // here we are using the object that ptr points too. If ptr._data happened to be nullptr, you would have UB
}

＆＃13;

.services {
  display: flex;
  overflow: hidden;
}
.left {
  background-color: black;
  height: 250px;
  width: 60%;
  margin-left: -50px;
}
.right {
  background-color: green;
  width: 50%;
  margin-right: -500px
}
.skew {
  transform: skew(-15deg);
}
p {
  color: white;
}

＆＃13;

如何在不影响内容的情况下歪斜盒子？

希望你能帮忙

Answer 1

你歪斜了-15deg。只需向您的.inner-container添加15deg，就像这样：

.skew .inner-container {
  transform: skew(15deg);
}

仅对内容进行“疏忽”。

.services {
  display: flex;
  overflow: hidden;
}
.left {
  background-color: black;
  height: 250px;
  width: 60%;
  margin-left: -50px;
}
.right {
  background-color: green;
  width: 50%;
  margin-right: -500px
}
.skew {
  transform: skew(-15deg);
}
.skew .inner-container {
  transform: skew(15deg);
}
p {
  color: white;
}

<section class="services">
  <div class="left skew">
    <div class="inner-container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium deserunt fugiat, qui est delectus vel eligendi totam quidem amet laudantium harum, saepe voluptates voluptatibus. Aliquam ea, totam nulla magni.</p>
    </div>
  </div>
  <div class="right skew">
  </div>
</section>

Answer 2

将skew(15deg)添加到p标记

.services{
  display: flex;
  overflow:hidden;
}
.left{
  background-color: black;
  height: 250px;
  width: 60%;
  margin-left: -50px;
}
.right{
  background-color: green;
  width: 50%;
  margin-right: -500px
}

.skew{
  transform: skew(-15deg);
}

p{
  color: white;
  transform: skew(15deg);
}

<section class="services">
<div class="left skew">
  <div class="inner-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium deserunt fugiat, qui est delectus vel eligendi totam quidem amet laudantium harum, saepe voluptates voluptatibus. Aliquam ea, totam nulla magni.</p>
  </div>  
</div>
<div class="right skew">    
</div>
</section>

适用于段落的倾斜财产

2 个答案: