ある程度/角度のテーブルのコーナー

Question

私は右のボーダー/コーナーがある角度（30°）を持つテーブルを開発しようとしています。私はいくつかの似たような解決策を見てきましたが、それらのどれもある程度は働いていません。私が30°から20°に変更したい場合、私はそれに多大な努力を払うつもりはありません。

私のソリューションのどれもうまくいきませんでしたので、これでさらに助けてくれることを願っています。

解決策が機能している限り、テーブルやdivで使用すると問題はありません。あなたがあなたのケースのためにあなたがborder-top-right-radiusプロパティが右上隅の境界線の形状を定義し使用することができ、border-raduisプロパティを使用することができます

Answer 1

ありがとうございました。

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要素を使用することになり、それを回転させ、その後、rightとtopで所定の位置に「プッシュ」。学位を変更するたびに右と上を変更する必要があります。

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; 
 
}

<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>