三角形のブートストラップバッジを作成する

Question

三角形の中央にテキストを入れた三角形のブートストラップバッジを作成しようとしています。通常のバッジのための
コード：三角形のブートストラップ・バッジ用https://jsfiddle.net/wqrry89r/
コード：https://jsfiddle.net/wqrry89r/1/
私のCSSコードは次のとおりです。

.badge-triangle { 
    left: 10px; 
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent; 
    border-right: 100px solid transparent; 
    border-bottom: 100px solid #777; 
    background-color: #fff; 
} 

.badge-triangle:after { 
    left: 10px; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 50px solid #FFF; 
    left: 57px; 
    position: absolute; 
    top: 38px; 
    content: ''; 
} 

がどのように私は、ブートストラップバッジ三角形としますが、テキストは三角形の中央に行くことにすることができますか？

Answer 1

.badge { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
\t border-top: 90px solid #CC0000; 
 
\t border-left: 90px solid transparent; 
 
} 
 
.mask-t { 
 
    color: #fff; 
 
    position: absolute; 
 
\t width: 100px; 
 
\t height: 100px; 
 
    right: 0px; 
 
    top: 0px; 
 

 
} 
 
.mask-t strong { 
 
    display: block; 
 
    width:100%; 
 
    height:100%; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    -webkit-transform: rotate(45deg) translate(0, -25%); 
 
    -moz-transform: rotate(45deg) translate(0, -25%); 
 
    -ms-transform: rotate(45deg) translate(0, -25%); 
 
    -o-transform: rotate(45deg) translate(0, -25%); 
 
    transform: rotate(45deg) translate(0, -25%); 
 
}

<div class="badge"> 
 
</div> 
 
<div class="mask-t"> 
 
    <strong>Sale!</strong> 
 
</div>

Answer 2

正しい答えはすでに提供が、ちょうど別の考えを与えたいされているが。 これは通常のCSS（ブートストラップバッジではない）を使用していますが、実際のコードのみを変更しています。 ここでは、「三角形」をメイン三角形と見なしました。

HTMLの変更：

<div class="row"> 
    <div class="container my-triangle"> 
    <span class="badge-triangle"></span> 
    <span class="new-text">N.T.A</span> 
    </div> 
</div> 

CSSの変更：

.my-triangle{ 
    position:relative; 
    top:50px; 
    left:100px 
} 

.badge-triangle { 
    width: 0; 
    height: 0; 
    position:absolute; 
    border-left: 100px solid transparent; 
    border-right: 100px solid transparent; 
    border-bottom: 100px solid #777; 
} 

.badge-triangle:after { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 50px solid #fff; 
    left: -50px; 
    position: absolute; 
    top: 30px; 
    content: ''; 
} 

.new-text{ 
    position:absolute; 
    top:50px; 
    left:100px; 
    transform:translateX(-50%); 
} 

このフィドルを確認してください。

https://jsfiddle.net/wqrry89r/3/