html - 对齐框 (CSS/HTML)

Question

如何将红框与白框对齐？

如您所见，红色“框”与边框重叠。

代码：

HTML：

<div class="box" id="media">
   etc etc ... etc etc<br>etc etc
</div>
<div class="box2">
</div>

CSS：

.box{
   background: white;
   position: relative;
   width:100%;
   height: auto;
}

.box2{
    position: absolute;
    left: 0;
    bottom: -99px;
    border-style: solid;
    border-width: 100px 100vw 0 0;
    border-color: red transparent transparent transparent;
}

标签： htmlcss

Answer 1

您正在使用100vw边框尺寸。这意味着 100% 的视口。

您尚未共享所有相关代码，因此我无法判断您是否在这些 div 的容器上进行了填充，但如果有，您可以更改100vw为100%，红色三角形应遵循与白框相同的填充。