用三角形創建透明css邊框

Question

我正在嘗試找到一種方式來與三角形建立動態邊框。目前，與基本的漸變效果，這是我做的：

My current effect in action

但你可以看到，背景有一個梯度，我們可以看到邊框背景不匹配..

我該如何達到這個效果？此外，文本可能會因不同的屏幕尺寸和其他字而有所不同。

謝謝！

Answer 1

使用pseudo-elements和skewX是實現此目的的一種乾淨方式。檢查了這一點，我使用的是頂部，左側的元素&右邊框，然後在樣式作爲before左下角邊框和after爲正確的：

body { 
 
    background-color: white; 
 
    background-image: linear-gradient(45deg, #999 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, #999 75%, #999); 
 
    background-size: 10px 10px; 
 
    background-position: 0 0, 50px 50px; 
 
} 
 

 
.dialog { 
 
    text-align: center; 
 
    color: green; 
 
    font-size: 65px; 
 
    width: 300px; 
 
    height: 120px; 
 
    background-color: transparent; 
 
    border-width: 5px 5px 0 5px; 
 
    border-color: red; 
 
    border-style: solid; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.dialog:before { 
 
    content: ''; 
 
    border-top: 5px solid red; 
 
    border-right: 5px solid red; 
 
    transform-origin: left top; 
 
    transform: skewX(45deg); 
 
    position: absolute; 
 
    content: ' '; 
 
    height: 10px; 
 
    width: 46%; 
 
    background: inherit; 
 
    left: -5px; 
 
    bottom: -10px; 
 
} 
 
.dialog:after { 
 
    content: ''; 
 
    border-top: 5px solid red; 
 
    border-left: 5px solid red; 
 
    transform-origin: left top; 
 
    transform: skewX(-45deg); 
 
    position: absolute; 
 
    content: ' '; 
 
    height: 10px; 
 
    width: 46%; 
 
    background: inherit; 
 
    right: -5px; 
 
    bottom: -10px; 
 
}

<div class="dialog">Here I am</div>

Answer 2

要達到此目的，您可以使用背景圖片爲例，例如http://bootsnipp.com/snippets/featured/carousel-reviews-with-rating。

正如你可以看到他拍攝圖像，並調整其大小隻取一個三角形是這樣的：

.sprite-i-triangle { 
background-position: 0 -1298px; 
height: 44px; 
width: 50px; 
} 

試圖找到符合您的期望的圖像。否則你在這個網站有一些例子。 （http://bootsnipp.com）