三角で透明なCSSボーダーを作成する

Question

私は、三角形との動的境界線を見つける方法を試しています。現時点では、基本的なグラデーション効果で、これは私がやったことです：

My current effect in action

しかし、あなたが見ることができるように、背景がグラデーションを持っており、私たちは一致していない境界線の背景を見ることができます。..

どのようにこの効果を達成できますか？また、テキストは、画面のサイズやその他の言葉によって異なる場合があります。

ありがとうございました！

Answer 1

pseudo-elementsとskewXを使用すると、これを達成するための1つのクリーンな方法です。私はトップを使用しています、これをチェックし、要素に&右境界線を残し、その後、左の下の境界として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; 
} 

は、あなたの期待を満たしている画像を検索してみてください。それ以外の場合は、このサイトでいくつかのexemplesがあります。 （http://bootsnipp.com）