Question

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

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

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

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

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

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

编辑：

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

Answer 1

您可以使用transform-rotate和伪元素来创建响应三角形。这里详细介绍了这种技术：CSS triangles with transform rotate。

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

<强> DEMO

＆＃13;

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

＆＃13;

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

＆＃13;

如果您需要IE8支持，则需要使用JS后备。 This answer描述了实现它的方法。

Answer 2

如果您不关心IE8和最近的Android支持 - 并且由于您需要使边框宽度与页面大小成比例 - 您can use基于视口（vw和{ {1}}）单位

e.g。

vh

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

响应三角形div

2 个答案: