Question

嘿伙计们，我想知道你们是否可以帮助我一些我感兴趣的代码。在不同的网站，如udacity，或者我的朋友正在制作的网站（他不会告诉我代码）他们有对角背景。或者也许你可以把它称为对角线形状，或者不管它是什么我只是想知道如何创建它。一个例子是udacity的主页。他们有背景分裂，我想知道如何做（我不担心渐变）https://www.udacity.com/

Answer 1

这应该有效，

＆＃13;

.wrap {
  postion: relative;
  background-color: #fff;
  width: 100%;
}

.bg:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 400px;
  background-color: #000;
  transform-origin: left bottom;
  top: 0;
  left: 0;
  -webkit-transform: skew(0deg, -30deg);
  -moz-transform: skew(0deg, -30deg);
  -ms-transform: skew(0deg, -30deg);
  -o-transform: skew(0deg, -30deg);
  transform: skew(0deg, -30deg);
}

＆＃13;

<div class="wrap">
  <div class="bg"></div>
</div>

＆＃13;

Answer 2

.hero--homepage::before {
    content: '';
    width: 100%;
    height: 300px;
    z-index: -1000;
    background: linear-gradient(160deg, #02CCBA 0%, #AA7ECD 100%);
    transform-origin: left bottom;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: skew(0deg, -15deg);
    -moz-transform: skew(0deg, -15deg);
    -ms-transform: skew(0deg, -15deg);
    -o-transform: skew(0deg, -15deg);
    transform: skew(0deg, -15deg);
}

<div class = "hero--homepage"></div>

对角背景html和css

2 个答案: