CSS响应斜边 [英] CSS responsive slanted edge

问题描述

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

  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/

解决方案

应该为你工作。再次，我使用伪元素来改变颜色，但一般的共识是一样的。链接的问题和这个使用溢出：隐藏在父项，因此不会滚动。至于旋转，由于我使用了伪元素，这不应该是一个问题：

  .wrap {height：500px; width：100％; display：inline-block;位置：相对; overflow：hidden; z-index：8;}。wrap：after {content：; position：absolute;高度：130％; width：100％; transform：skewY（-4deg）;背景：番茄; top：-50％; z-index：-2; left：0;}。lower {position：absolute;底部：15％; right：0;}  

 < div class = >你好，世界！ < div class =lower>想要的文字？< / div>< / div>  

I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive.

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/

解决方案

This should work for you. Again, I've used a pseudo element in order to alter the color, but the general consensus is the same. Both the linked question and this use overflow:hidden on the parent and hence won't scroll. As for rotating, since I've used a pseudo element, this should not be an issue:

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

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

这篇关于CSS响应斜边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！