DIV与倾斜的边缘，保持长宽比

Question

我试图创建标头与倾斜的边缘，保持其纵横比无论他们出现什么样的高度。这是可能完成使用CSS单独？

此图像显示了头的样子，如果他们只有一条线长：

，如果他们两个或更多的线长，他们应该出现像：

我正在运行的问题是我无法使白色半边三角形覆盖标题的右侧部分来调整大小，更不用说调整其相同宽高比。下面是多线会发生什么原样：

现在显示标题的代码是：

HTML：

<header> 
    <nav> 
     <ul> 
      <li><a href="#">Public Information</a></li> 
     </ul> 
    </nav> 
    <h1>Board Meeting Schedule</h1> 
</header> 

CSS：

* { 
    font-family: sans-serif; 
    font-size: 16px; 
    font-weight: normal; 
    line-height: normal; 
    margin: 0; 
} 

header { 
    background: #0D3C5B; 
    display: inline-block; 
    overflow: hidden; 
    padding: 18px 80px 12px 20px; 
    position: relative; 
} 
    header:before { 
     border-left: 58px solid transparent; 
     border-top: 62px solid #FFF; 
     content: "\0020"; 
     display: block; 
     height: 0; 
     position: absolute; 
     right: 0; 
     top: 0; 
     width: 0; 
    } 

    header nav { 
     float: left; 
     margin: 0 6px 0 0; 
    } 

     header nav ul { 
      color: #42AFE3; 
      display: inline-block; 
      font-size: 0.75em; 
      font-weight: bold; 
      line-height: 1.6666666666666666666666666666667em; 
      line-height: 2.25em; 
      list-style: normal; 
      margin: 0; 
      padding: 0; 
      text-transform: uppercase; 
     } 

      header nav ul li { 
       display: inline-block; 
      } 

       header nav ul li a { 
        color: #42AFE3; 
        text-decoration: none; 
       } 

       header nav ul li:after { 
        content: "\003E"; 
        padding: 0 4px; 
       } 

    header h1 { 
     color: #FFF; 
     float: left; 
     font-size: 1.25em; 
     font-weight: bold; 
     line-height: 1em; 
     text-transform: uppercase; 
    } 

    header:after { 
     clear: both; 
     content: "\0020"; 
     display: block; 
     visibility: hidden; 
    } 

这里是一个小提琴：http://jsfiddle.net/doLuj6me/

Answer 1

是！三角形边框技巧是真棒，但不幸的是，它涉及到动态大小的元素时非常不灵活。

幸运的是，CSS3为我们提供了一些新的工具来利用游戏方式。

这里就是你要做的：

CSS

header { 
    background: #0D3C5B; 
    display: inline-block; 
    overflow: hidden; 
    padding: 18px 80px 12px 20px; 
    position: relative; 
} 

header:before { 
    content:''; 
    transform:rotate(45deg); 
    transform-origin: bottom right; 
    height: 100%; 
    width: 100%; 
    background-color: white; 
    position: absolute; 
    right: 0; 
} 

这是它的肉。我们在标题的末尾添加了一个伪元素，将它扭曲45º，并将其设置得如此之大以至于能覆盖任何合理的大小。

Fiddle illustrating this bit of hackery

瞧。

Answer 2

尝试设置正确的三角形位置：绝对;和右：0;底部：0;您需要负责确保文本不会被覆盖，如果它变长...还要确保包含div已溢出：剪辑集，以便正确的三角形不会逃脱格:)

嗯......我错过了你没有一个单独的三角形元素。你应该把头部分割成一个带有文本div和正确的三角形div的容器。如上所述，容器应该有position：relative和正确的三角形div。

Answer 3

这里是不使用转换或旋转的例子：

http://jsfiddle.net/ryanwheale/twxgnjcw/

试着改变DIV的高度，你会看到斜线增长与DIV。

div { 
    height: 400px; 
    background: blue; 
    position: relative; 
    overflow: hidden; 
} 

div:after { 
    content: " "; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 100%; 
    bottom: -2000px; 
    margin-left: -2000px; 
    border-width: 2000px; 
    border-style: solid; 
    border-color: white transparent transparent; 
} 

Answer 4

克里斯托弗是在正确的轨道上。所有你需要做的是在右下角你header:before位置，给你的边界更大尺寸比你将需要：

header:before { 
    content: " "; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    height: 0; 
    width: 0; 
    border-left: 400px solid transparent; 
    border-top: 400px solid #FFF; 
} 

退房的Fiddle。 （更新的一些家政服务的链接）