Question

尝试按照图像建议来实现某些目标，并且不确定什么是最佳方法，因为我想在悬停时使用div高度。

容器div必须是100％宽度，100％高度且div内部完全响应。

Borders，pseudos或background不适合这种特殊情况。

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中，您会发现旋转和倾斜评论。

Answer 1

	.gradient{ width: 250px; height: 500px;
		background: -webkit-linear-gradient(-45deg, #000 0% , #000 45%, #53ff00 45%, #53ff00 50%, #7e7e7e 50%, #7e7e7e 100%);
		background: -moz-linear-gradient(-45deg, #000 0% , #000 45%, #53ff00 45%, #53ff00 50%, #7e7e7e 50%, #7e7e7e 100%);
		background: linear-gradient(-45deg, #000 0% , #000 45%, #53ff00 45%, #53ff00 50%, #7e7e7e 50%, #7e7e7e 100%);
		
	 }

<div class="gradient"></div>

您也可以使用线性渐变

Answer 2

希望它适合你。

如果想要纯CSS解决方案，可以试试这个。它使用 Traingle区域和所有其他计算。我已将<button class="button" id="send2" onclick="hide()" > Login </button>提供给width: 300px;height:600px;，然后完成了计算。您可能需要相应更改。我使用parent DIV来编写我的CSS，所以对我来说很容易。虽然我尝试使用SCSS进行更多的计算，以使其更加友好。

＆＃13;

calc

＆＃13;

.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);
}

＆＃13;

如果您想查看 SCSS ，则下面是代码。

<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>

参考：Area of Traingle and Sides height/width

Answer 3

它很容易使用 border 样式：

＆＃13;

#id1 {
        background-color: #53ff00;
            position: relative;
            width:100px;
    }
    #id2 {
        width: 0;
        height: 0;
        border-top: 100px solid #000;
        border-right: 100px solid transparent;      
    }
    #id3 {
        width: 0;
        height: 0;
       border-bottom: 100px solid #969696;
        border-left: 100px solid transparent;
       margin-top:-65px
    }
    #top{
        height: 50px;
        background-color: #000;
        width:100px;
    }
    #bottom{
        height: 50px;
        background-color: #969696;
        margin-top: -4px;
        width:100px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="top"></div>
    <div id="id1">
      <div id="id2"></div>
      <div id="id3"></div>
    </div>
    <div id="bottom"></div>

＆＃13;

完整形状的CSS链接：The Shapes of CSS

对角线div分为3个div

3 个答案: