响应三角形div

Question

我正在尝试创建一个响应式三角形div ，它将作为标题位于页面顶部。

我能够通过以下代码实现这一目标：

 div{ width: 0; height: 0; border-style: solid; border-width: 200px 400px 0 0; border-color: #007bff transparent transparent transparent; } 

 <div></div> 

问题是我希望这个三角形能够响应页面的宽度并按比例改变高度。

我尝试将宽度和高度设置为百分比，但是这会产生一个非常小的三角形，您可以在此处看到：

http://jsfiddle.net/Ltbzkq0e/1/

如何在不使用webkits的情况下使边框使用百分比？ 这是可能的，如果不是我如何用webkits实现这种效果？

编辑：

我还想在这个div中使用内容。 目前，我能想到的唯一方法是使用绝对定位并将高度设置为-20px等等......有没有更好的方法来实现这一目标？

Answer 1

您可以使用transform-rotate和pseudo元素来创建响应三角形 。 这里详细介绍了这种技术： 带有变换旋转的CSS三角形 。

对于您的具体情况，它可能如下所示：

DEMO

 .tr{ padding-bottom:30%; position:relative; overflow:hidden; } .tr:before{ content:''; position:absolute; top:0; left:0; width:120%; height:100%; background-color : #0079C6; -webkit-transform-origin:0 100%; -ms-transform-origin:0 100%; transform-origin:0 100%; -webkit-transform: rotate(-17deg); -ms-transform: rotate(-17deg); transform: rotate(-17deg); } .content{ position:absolute; } 

 <div class="tr"> <div class="content"> ... CONTENT HERE ...</div> </div> 

如果需要IE8支持，则需要使用JS回退。 这个答案描述了实现它的方法。

Answer 2

如果您不关心IE8和最近的Android支持 - 并且因为您需要使边框宽度与页面大小成比例 - 您可以使用基于视口（ vw和vh ）的单位

例如

border-width: 100vw 100vh 0 0;

示例小提琴： http ： //jsfiddle.net/swbfqemr/