Question

我对这个看似简单的css感到茫然：我如何修改下面的代码，使其具有三个或更多不同的平行四边形，水平排列，它们之间有一些空间？

HTML：

<div id="parallelogram"></div>

的CSS：

#parallelogram {
width: 20px;
height: 60px;
margin: 0 0 0 20px;
-webkit-transform: skew(-11deg);
   -moz-transform: skew(-11deg);
     -o-transform: skew(-11deg);
      -ms-transform: skew(-11deg);
background: #0272a7;
}

Answer 1

简而言之

float:left;

将它们水平排列而不是在每一个之后跳到下一行。此外，因为你说＆＃34;几个矩形＆＃34;我冒昧地使用了一个类名。

我做了一些假设。不过，请参阅此jsFiddle，了解您的要求

Answer 2

使用inline-block使其与每个对齐。

 .parallelogram {
 width: 20px;
 height: 60px;
 margin: 0 0 0 20px;
 -webkit-transform: skew(-11deg);
-moz-transform: skew(-11deg);
 -o-transform: skew(-11deg);
  -ms-transform: skew(-11deg);
background: #0272a7;
display:inline-block;
}

DEMO

Answer 3

使用class代替id

<div class="parallelogram"></div>
<div class="parallelogram"></div>
<div class="parallelogram"></div>
<div class="parallelogram"></div>

CSS -

.parallelogram {
width: 20px;
height: 60px;
margin: 0 0 0 20px;
-webkit-transform: skew(-11deg);
   -moz-transform: skew(-11deg);
     -o-transform: skew(-11deg);
      -ms-transform: skew(-11deg);
background: #0272a7;
 float: left;
}

或使用display: inline-block

.parallelogram {
width: 20px;
height: 60px;
margin: 0 0 0 20px;
-webkit-transform: skew(-11deg);
   -moz-transform: skew(-11deg);
     -o-transform: skew(-11deg);
      -ms-transform: skew(-11deg);
background: #0272a7;
display: inline-block;
}

工作FIDDLE

css水平排列的多个矩形

3 个答案: