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。 （更新的一些家政服務的鏈接）