响应三角形 [英] Responsive triangle div

问题描述

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

I'm trying to create a responsive triangle div which will sit at the top of the page as a header.

能够使用以下代码实现：

I was able to achieve that with the following code:

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

<div></div>

我尝试将宽度和高度设置为百分比但是这产生了一个真正的小三角形，你可以在这里看到：

I tried setting width and height to percent based, however that produced a really small triangle which you can see here:

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

如何使边框与百分比无关而不必使用webkits？这是可能的，如果不是我如何实现这个效果与webkits？

How to make the borders work with percent without having to use webkits? Is that possible, if not how do I achieve this effect with webkits?

编辑：

喜欢适合在这个div的内容。目前，我唯一能想到的是使用绝对定位和设置高度到-20px，等...有更好的方法来完成这个吗？

I would also like to fit content in this div. At the moment the only way I can think of is to use absolute positioning and set height to -20px, etc... Is there a better way of accomplishing this?

推荐答案

您可以使用 transform-rotate 和伪元素创建响应三角形。此技巧详细说明如下：带有变换旋转的CSS三角形。

You can use transform-rotate and a pseudo element to create a responsive triangle. This technique is detailed here : CSS triangles with transform rotate.

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

For your specific case it could look like this :

DEMO

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后备。 此答案描述了实现它的方法。

If you need IE8 support, you will need to use a JS fallback. This answer describes a way to achieve it.

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