Question

我正在创建一个基本网页，但对于页脚，将会出现一个倾斜的边缘，该边缘将在页面底部运行。我遇到问题，因为你无法在边框上添加100％，因为我使用的是bootstrap，因此页面必须是响应式的。是否有办法在响应时实现这种影响。

div {
 width:200px;
 height:80px;
 background: red;
 top:150px;left:100px;
 position: relative;
}

div:before {
 content: '';
 position: absolute;
 top: 40px; right: 0;
 border-right: 200px solid white;
 border-top: 40px solid red;
 width: 20;
}

http://jsfiddle.net/2bZAW/3675/

Answer 1

这对你有用。我再次使用伪元素来改变颜色，但普遍的共识是相同的。链接的问题和这个使用溢出：隐藏在父级上，因此不会滚动。至于旋转，因为我使用了伪元素，这应该不是问题：

＆＃13;

.wrap {
  height: 500px;
  width: 100%;
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 8;
}
.wrap:after {
  content: "";
  position: absolute;
  height: 130%;
  width: 100%;
  transform: skewY(-4deg);
  background: tomato;
  top: -50%;
  z-index: -2;
  left: 0;
}
.lower {
  position: absolute;
  bottom: 15%;
  right: 0;
}

＆＃13;

<div class="wrap">
  Hello, World!
  <div class="lower">Wanted text here?</div>
</div>

＆＃13;

CSS响应倾斜的边缘

1 个答案: