CSS Trapezium 在引导模式中变成三角形

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

您好，我试用了您的代码。这是一个三角形，因为设置的高度不足以形成梯形。因此它是一个三角形。你有两个解决方案。

增加 wonText div 的高度。

height : 15vw //or more 

减小边框宽度。以下维度对我有用

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