我正在尝试构建一个CSS三角形,它根据父元素的宽度自动调整大小。
目前,我已经为所创建的三角形设置了自定义大小,因此在调整大小时,三角形开始超出父元素。但是我需要三角形在调整大小时保持在父元素内部,但是占用整个宽度。请帮忙。谢谢。
以下是我的HTML和CSS代码:
.triangle-container{
width:50%;
height:200px;
background-color: #000000;
}
.triangle{
width:0;
height:0;
border-left:167px solid rgba(0,0,0,0);
border-right:167px solid rgba(0,0,0,0);
border-top:100px solid red;
}
<div class="triangle-container">
<div class="triangle"></div>
</div>