如何避免div元素的border-right超出容器范围？

问题根源在于CSS默认的盒模型行为：默认的content-box盒模型中，元素设置的width仅包含内容区域，边框和内边距会额外增加元素的总宽度。你的.secundaria设置了width: 500px，再加上border-right: 5px，元素总宽度会变成505px，自然会超出容器范围。

最简单的解决方式是给.secundaria添加box-sizing: border-box属性，让边框和内边距被包含在你设定的width和height范围内，不会额外撑开元素：

修改后的CSS代码：

.secundaria {
  width: 500px;
  height: 610px;
  background-color: #c32929;
  margin-top: 90px; /* 负边距等于SVG多边形的高度 */
  border-bottom: 5px solid black;
  border-right: 5px solid black;
  box-sizing: border-box; /* 添加该行属性 */
}

如果希望页面所有元素都默认采用这种盒模型规则，也可以全局设置：

* {
  box-sizing: border-box;
}

这样就能保证元素总宽度不会因边框或内边距超出设定的容器范围。

内容的提问来源于stack exchange，提问作者Lucas Gomes