Question

我正在尝试开发右边框/角有一定角度（30°）的桌子。我已经看到了一些类似的解决方案，但它们都没有在某种程度上起作用。如果我想从30°变为20°，我不想付出太多努力。

我希望你能帮我进一步解决这个问题，因为我的解决方案都没有。

只要解决方案有效，我就可以在桌面或div上使用它。

非常感谢

Answer 1

您可以使用border-raduis属性，对于您的情况，您可以使用border-top-right-radius属性定义右上角的边框形状。

td {
  width:50px;
  height:50px;
  display:inline-block;
  border:1px solid #000;
}
table{

 border:2px solid blue;
 border-top-right-radius : 10px;
 border-bottom-right-radius : 10px;

}

<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

Answer 2

我不知道这是多么动态，但我会使用绝对的::after元素，旋转它，然后＆＃34; push＆＃34;它与right和top一致。每次更改学位时，您都需要更改右侧和顶部。

＆＃13;

table {
  position: relative;
  border: 1px solid #000;
}

table::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: -34px;
  right: -16px;
  border-top: 1px solid #000;
  background-color: #fff;
  transform: rotate(-30deg);
}

td {
  width: 80px;
  height: 30px;
  border: 1px solid #000;
}

＆＃13;

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr><tr>
    <td></td>
    <td></td>
    <td></td>
  </tr><tr>
    <td></td>
    <td></td>
    <td></td>
  </tr><tr>
</table>

＆＃13;

桌角在一定程度/角度

2 个答案: