Question

我怎样才能做出这样的事情？

我试图像在图片中那样做，但它现在正在工作。

我的HTML看起来像这样：

<div class="how-we-do">
<div class="left">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cum necessitatibus eveniet quisquam architecto harum iure aliquid, odit hic quasi assumenda omnis sequi optio nisi sit delectus dicta tenetur officiis?</p>
  </div>
  <div class="right">
  </div>
</div>

和我的css如下：

.left{
  background-color:blue;
  transform: skew(-10deg);
  width: 500px;
}

这是我的笔：http://codepen.io/Sidney-Dev/pen/gwNEve 希望你能帮忙。

Answer 1

要整理内容，请将另一个div元素换成正值。您在图像中看到的内容可以通过背景图像完成。

Codepen：http://codepen.io/anon/pen/yadwwL

<强> HTML

<div class="how-we-do">
 <div class="left">
  <div class="inner-left">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cum necessitatibus eveniet quisquam architecto harum iure aliquid, odit hic quasi assumenda omnis sequi optio nisi sit delectus dicta tenetur officiis?</p>
  </div>
 </div>
 <div class="right">
  <div class="inner-right">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cum necessitatibus eveniet quisquam architecto harum iure aliquid, odit hic quasi assumenda omnis sequi optio nisi sit delectus dicta tenetur officiis?</p>
  </div>
 </div>    
</div>

<强> CSS

 * {
  box-sizing: border-box;
}

.how-we-do {
  width: 70%;
  margin: 0 auto;
}

.left, .right {
  float: left;
}

.left{
  width: 50%;
  padding: 2rem;
  background-color:blue;
  transform: skew(-10deg);
  width: 500px;
}

.inner-left{ 
  transform: skew(10deg);

}

.right{
  width: 50%;
  padding: 2rem;
  background-color:red;
  transform: skew(-10deg);
  width: 500px;
}

.inner-right {     
  transform: skew(10deg);    
 }

Answer 2

CSS偏斜不是你想要的。你想要CSS形状 CSS大师Sara Soueidan用大量的例子深入地写了一篇关于它们的blog post。 Clippy是一个很好的工具，用于计算多边形坐标。

＆＃13;

body{
  margin: 0;
  padding: 0;
  background: #2f73bc;
  font-size: .5em; /*extra small for SO's little preview box*/
}

article {
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    margin: 0;
    position: relative;
    padding-top: 1em;
    box-sizing: border-box;
    text-align: right;
}

.gray {
    -webkit-clip-path: polygon(39% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(39% 0, 100% 0, 100% 100%, 0 100%);
    shape-outside: polygon(39% 0, 100% 0, 100% 100%, 0 100%);
    background: #d7d7d7;
    overflow: hidden;
    width: 60%;
    height: 100%;
    height: 100vh;
    box-sizing: border-box;
    float: right;
    shape-margin: 2%;
}

h1 {
  font-weight: normal;
  font-size: 2em;
}

h1 span{
  font-weight: bold;
}

h3 {
    font-weight: normal;
  text-transform: uppercase;
}

p{font-size: .9em;}

/*buttons*/

article div{position: relative;}
button {
    border: none;
    font-size: 3em;
    width: 100px;
    line-height: 100px;
    border-radius: 50%;
    background: #fff;
    color: #2f73bc;
    position: absolute;
    top: 0;
    margin-left: 5%;
    /* right: 0; */
}

＆＃13;

<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
  <div class="gray"></div>
  <article><h1><span>WHAT</span> WE DO</h1>
    <div> 
      <h3>Branding</h3>
      <p>Simply scaling or moving elements around on <br> a flexible... READ MORE</p>
    </div> 
    
    <div> 
      <h3>Navigation</h3>
      <p>The site navigation is laid out in <br>different locations... READ MORE</p>
    </div> 
    
    <div> 
      <h3>Content &amp; grids</h3>
      <p>A responsive website will scale headlines, images, <br> text and... READ MORE</p>
    </div> 
    
    <div> 
      <h3>Calls to action</h3>
      <p>Good responsive design considers the  critical calls <br> to action... READ MORE</p>
    </div>
  </article>
</body>

＆＃13;

这是一个使用按钮显示它的codepen：http://codepen.io/StuffieStephie/full/bqodjW/

如何使用CSS偏斜

2 个答案: