CSSの台形がブートストラップの内側に三角形になる

Question

ブートストラップのモーダルの中にテキスト付きの台形を描こうとしていますが、私が次のことをしようとしているときに台形の代わりに三角形ができます。台形は応答性があり、モーダルの中心に水平にしたい。

HTML

<div id="podium" class="modal" role="dialog" aria-labelledby="podium"> 
    <div class="modal-dialog modal-lg" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h1 class="modal-title">Game Over!</h1> 
      </div> 
      <div class="modal-body"> 
       <span id="winnerSymbol" class="noughts">&#9711;</span> 
       <img id="crown" class="crownNought" src="images/crown.png"/> 
       <div id="wonText" class="box">WON</div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#wonText { 
    border-left: 20vw solid red; 
    border-top: 5vw solid transparent; 
    border-bottom: 5vw solid transparent; 
    width: 0; 
    height: 10vw; 
} 

Answer 1

こんにちは、私はあなたのコードを試してみました。高さの設定は台形が形成されるのに十分ではなかったので三角形でした。したがって、それは三角形でした。あなたには2つの解決策があります。

あなたのwonText divの高さを上げます。

height : 15vw //or more 

境界線の幅を小さくします。次のdimensioinsは私のために働いた

border-left : 10vw solid red; 
border-top : 3vw solid transparent; 
border-bottom : 3vw solid transparent; 
width: 0; 
height : 10vw;