html - 无论如何让边框厚度跟随父宽度/高度？

Question

例如，我有一个 300*400 的 div，用于包含一个粗边框的表格，以创建一些视觉效果：

<div style="width:200px;height:150px;background-color:black;position:relative;">
  <table style="border-top:50px solid red;border-left:50px solid yellow;border-bottom:50px solid green;border-right:50px solid blue;"></table>
</div>

但现在表格边框只能有固定的边框宽度：100px，但我希望整个表格通过使用边框适合 div，我试过：

<div style="width:200px;height:150px;background-color:black;position:relative;">
      <table style="border-top:50% solid red;border-left:50% solid yellow;border-bottom:50% solid green;border-right:50% solid blue;"></table>
    </div>

它将每个边框宽度设置为 50%，但它不起作用，有没有办法做到这一点？

标签： htmlcss

Answer 1

<div style="width:200px;height:150px;background-color:black;position:relative;">
  <table style="
    border-top: 75px solid red;
    border-left: 100px solid yellow;
    border-bottom: 75px solid green;
    border-right: 100px solid blue;"></table>
</div>