我正在尝试创建一个响应式三角形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/ http://jsfiddle.net/Ltbzkq0e/1/
如何在不使用 webkit 的情况下使边框与百分比一起使用？这可能吗，如果不可能的话我该如何使用 webkit 达到这种效果？
EDIT:
我还想将内容放入这个 div 中。目前我能想到的唯一方法是使用绝对定位并将高度设置为-20px等...有没有更好的方法来实现这一点？
您可以使用transform-rotate和一个伪元素来创建响应三角形。该技术的详细信息如下：CSS 三角形与变换旋转 https://stackoverflow.com/a/24808936/1811992.
对于您的具体情况，它可能如下所示：
DEMO http://jsfiddle.net/webtiki/hnc597cv/
.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 后备。这个答案 https://stackoverflow.com/questions/11936655/how-to-create-an-triangle-shape-fixed-height-width-100-with-background-using/26698502#26698502描述了一种实现它的方法。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
