html - 沿对 Angular 线拆分为 3 个 div

Question

尝试实现图片所示的效果，但不确定什么是最佳方法，因为我想在悬停时调整 div 高度。

容器 div 必须为 100% 宽度、100% 高度并且内部的 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你会发现 rotate 和 skewY 都有注释。

Answer 1

希望它对你有用。

如果想要纯 CSS 解决方案，您可以试试这个。 它使用 Area of​​ Traingle 和所有其他计算。 我已经将 width: 300px;height:600px; 给了 parent DIV 然后进行了计算。您可能需要相应地进行更改。 我使用 SCSS 来编写我的 CSS，所以这对我来说很容易。尽管我已经尝试使用 calc 进行更多计算以使其对 CSS 更友好。

.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