用css和'三角形邊緣'創建一個矩形

Question

我試圖創建一個帶有'三角形邊緣'的矩形頭部的css容器。

例子：

chrome example

或代碼在這裏（CSS）：

.bubble { 
    clear: both; 
    margin: 0px auto; 
    width: 350px; 
    background: #fff; 
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    position: relative; 
    z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */ 
} 

div#container { 
    margin: 50px auto 0px auto; /* centered */ 
    padding-top:100px; 
    width: 400px; 
} 

.triangle { 
    height: 35px; 
    top: -20px; 
    width: 315px; 
    position: relative; 
    background: #D12738; 
    background: -moz-linear-gradient(top, rgba(209, 39, 56, 1) 0%, rgba(122, 23, 38, 1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209, 39, 56, 1)), color-stop(100%,rgba(122, 23, 38, 1))); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d12738', endColorstr='#7a1726',GradientType=0), filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
} 

.triangle::after { 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(35deg); 
    -o-transform: rotate(45deg); 
    background: none repeat scroll 0 0 white; 
    content: ""; 
    height: 44px; 
    left: 302px; 
    position: absolute; 
    top: 2px; 
    width: 24px; 
} 

HTML：

<div id="container"> 
    <div class="bubble"> 
     <div class="triangle">test baa</div> 
     <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p> 
     <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p> 
     <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p> 
     <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p> 

    </div> 
</div> 

但在白色的，因爲右邊緣自敗的邊界背景。有什麼辦法可以防止這種情況發生？

任何幫助表示讚賞！

Answer 1

你不能通過用該方法創建一個三角形來完成你想要做的事情，因爲根據定義，你將一塊矩形擋住了，同時也阻止了它背後的其他任何東西。

完成想要完成的任務的方法是使用邊框創建三角形。這裏有一個鏈接和小提琴你怎麼可能做到這一點：

http://css-tricks.com/snippets/css/css-triangle/ http://jsfiddle.net/BNVHU/7/

不幸的是，邊框漸變只有WebKit的在這個時候工作，不要」 t似乎與邊界製作三角形的方法一致。我懷疑有一種方法可以在所有瀏覽器中保持完整的梯度。可能需要一張圖片。