html - 对 Angular 线 div 填充父 div 的完整空间

Question

我正在尝试创建一个具有相对高度和宽度的 div，其中包含三个对 Angular 线对齐的框，并填充相对父 div 的完整空间。

我有点难以解释，所以这里有一张图片说明我的意思:http://i.imgur.com/s2uSTVU.png 除了红线之间的小空间外，所有空间都应该被对 Angular 线框覆盖。

这有可能吗？我非常感谢有人可以向我开枪的每条建议或提示!

以下是我目前得到的代码。我现在遇到的问题是如何使对 Angular 线 div 填满它们周围的整个空间。

<div class="parent">
  <div class="box-1">box1</div>
  <div class="box-2">box2</div>
  <div class="box-3">box3</div>
</div>

CSS:

.box-1 {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  width: 100%;
  margin: 0px 0px 10px 0px;
  height: 33.33%; }

.box-2 {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  width: 100%;
  margin: 0px 0px 10px 0px;
  height: 33.33%; }

.box-3 {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  width: 100%;
  height: 33.33%; }

你好，头麻子!

Answer 1

你可以试试:fiddle

.parent {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.parent > div {
    background: #c1c1c1;
}
.box-1 {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  width: 100%;
  margin: 0px 0px 10px 0px;
  height: 33.33%; }

.box-2 {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  width: 100%;
  margin: 0px 0px 10px 0px;
  height: 33.33%; }

.box-3 {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  width: 100%;
  height: 33.33%; }