使用不同颜色水平分割背景的一半

时间:2017-11-09 07:36:13

标签: html css css3 background

有没有办法用CSS

来存档这样的div背景

enter image description here

2 个答案:

答案 0 :(得分:3)

您可以使用linear-gradient()

.box {
  background: linear-gradient(165deg, #41c7b4 54.5%, #ff7c4a 55%);
  border-radius: 4px;
  height: 205px;
  width: 150px;
}
<div class="box"></div>

答案 1 :(得分:1)

有!您可以使用:伪类(:before:after)。

&#13;
&#13;
div {
  width: 150px;
  height: 200px;
  background: #41c7b4;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

div:before {
  content: "";
  display: block;
  width: 200px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: -25px;
  transform: rotate(-10deg);
  transform-origin: top right;
  background: #ff7c4a;
}
&#13;
<div></div>
&#13;
&#13;
&#13;