CSS响应倾斜的边缘

我正在创建一个基本的网页，但对于页脚，会出现一个倾斜的边缘，它会在页面底部运行。由于您无法在边框上添加100％，因此我在使用引导程序时遇到问题，因此网页必须具有响应能力。有没有办法在响应的同时实现这种影响？CSS响应倾斜的边缘

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/

来源

2015-02-10 jsg

可能重复（HTTP：/ /stackoverflow.com/questions/28211471/is-it-possible-to-create-a-sheared-div） – jbutler483 2015-02-10 14:51:33

相同的概念，但当在原始div和文本下面使用文本，与它也不响应作为容器将是130％宽度 – jsg 2015-02-10 15:01:00

你能解释通过更新你的问题，这是不同的吗？也许使用'预期结果'的图像？甚至是一张图？ – jbutler483 2015-02-10 15:03:10

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

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

的[是否有可能创建一个剪切DIV？]

来源

2015-02-10 16:16:44 jbutler483

CSS响应倾斜的边缘

回答

相关问题