html – 以3个div分割对角div

2019年7月2日 328次阅读

试图像图像所暗示的那样实现某些目标,并且不确定什么是最好的方法,因为我想在悬停时使用div高度.

容器div必须是100％宽度,100％高度,div内部完全响应.

边框,伪或背景不适用于这种特殊情况.

《html – 以3个div分割对角div》

HTML

<div class="container">
  <div class="top"></div>
  <div class="center">
    <p>text text</p>
  </div>
  <div class="bottom"></div>
</div>

CSS

.container{
      width: 100%;
      height: 100vh;
      overflow: hidden;
     //  transform: skewY(-45deg);
     //  transform: rotate(-45deg);
}
.top, .bottom {
    width: 100%;
    height: calc(50% - 20px);
}
.top {
    background: black;
}
.bottom {
    background: grey;
}
.center {
    background: green;
    height: 40px;
    width: 100%;
}
p {
  color: white;
  line-height: 10px;
  text-align: center;
}

在jsfiddle中,您会发现旋转和倾斜评论.

最佳答案 希望对你有效.

如果想要纯CSS解决方案,你可以试试这个.
它使用Traingle区域和所有其他计算.
我给了宽度：300px;高度：600px;到父DIV然后完成计算.您可能需要相应更改.
我使用SCSS编写我的CSS,所以对我来说很容易.虽然我尝试使用calc进行更多计算,以使其更加友好.

.parent {
  position: relative;
  width: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 600px;
  /* Not relevant. this was used to show a Guide-point of intersection of one of triangle's side. 
  &:before {
    content: '';
    width: 2px;
    height: 2px;
    background: #000;
    position: absolute;
    left: calc(50% - 1px);
    top: -1px;
    display: block;
  }
  &:after {
    content: '';
    width: 2px;
    height: 2px;
    background: #000;
    position: absolute;
    left: calc(50% - 1px);
    bottom: -1px;
    display: block;
  }
  */
}

.child {
  min-height: 20px;
  padding: 15px;
  transform: skewY(-30deg);
  transition: all 0.2s ease;
  display: flex;
  align-content: center;
  align-items: center;
}

.child:hover {
  height: calc(100% - 40px);
}

.child:hover~.child {
  height: 20px;
}

.child__inner {
  transform: skewY(30deg);
  color: #fff;
}

.child--top {
  background: tomato;
  height: calc(50% - 20px);
  margin-top: calc((150px / 1.73)* -1);
  padding-top: calc((150px / 1.73) * 2);
}

.child--middle {
  background: DeepSkyBlue;
}

.child--bottom {
  background: MediumSeaGreen;
  height: calc(50% - 20px);
  margin-bottom: calc((150px / 1.73)* -1);
  padding-bottom: calc((150px / 1.73) * 2);
}
<div class="parent">
  <div class="child child--top">
    <div class="child__inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, accusantium. Illo minima ipsa, at dignissimos perspiciatis nesciunt. Hic quae porro assumenda possimus fugit, velit eaque magni, reiciendis veritatis perspiciatis recusandae?
    </div>
  </div>
  <div class="child child--middle">
    <div class="child__inner">

    </div>
  </div>
  <div class="child child--bottom">
    <div class="child__inner">

    </div>
  </div>
</div>

如果要检查SCSS,下面是代码.

.parent {
  position: relative;
  width: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 600px;
  /* Not relevant. this was used to show a Guide-point of intersection of one of triangle's side. 
  &:before {
    content: '';
    width: 2px;
    height: 2px;
    background: #000;
    position: absolute;
    left: calc(50% - 1px);
    top: -1px;
    display: block;
  }
  &:after {
    content: '';
    width: 2px;
    height: 2px;
    background: #000;
    position: absolute;
    left: calc(50% - 1px);
    bottom: -1px;
    display: block;
  }
  */
}

.child {
  min-height: 20px;
  padding: 15px;
  transform: skewY(-30deg);
  transition: all 0.2s ease;
  display: flex;
  align-content: center;
  align-items: center;

  &:hover {
    height: calc(100% - 40px);
  }
  &:hover ~ .child {
    height: 20px;
  }
  &__inner {
    transform: skewY(30deg);  
    color: #fff;
  }
  &--top {
    background: tomato;
    height: calc(50% - 20px);
    margin-top: calc((150px / 1.73)* -1);
    padding-top: calc((150px / 1.73) * 2);
  }
  &--middle {
    background: DeepSkyBlue;
  }
  &--bottom {
    background: MediumSeaGreen;
    height: calc(50% - 20px);
    margin-bottom: calc((150px / 1.73)* -1);
    padding-bottom: calc((150px / 1.73) * 2);
  }
}

参考：Area of Traingle and Sides height/width

点赞