Question

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

我很难解释，所以这里是我的意思：http://i.imgur.com/s2uSTVU.png 除了红线之间的小空间外，所有空间都应该被对角线框覆盖。

这有可能吗？我非常感谢有人可以拍我的每一条建议或小费！

以下代码是我到目前为止所得到的。现在我遇到的问题是如何让对角线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%; }

问候，Toumazi！

Answer 1

您可以尝试：fiddle

package test;

public enum Fruits {

    Banana("banana", "B"), Apple("apple", "A"), Orange("orange", "O");

    private String type, ID;

    private Fruits(String type, String ID) {
        this.type = type;
        this.ID = ID;

    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getID() {
        return ID;
    }

    public void setID(String iD) {
        ID = iD;
    }
}

对角div填充父div的完整空间

1 个答案: