Coin de la table dans un certain degré/angle

Question

J'essaie de développer des tables où le bord droit/coin a un certain angle (30 °). J'ai vu des solutions similaires, mais aucune d'entre elles ne fonctionne avec certains degrés. Si je veux changer de 30 ° à 20 °, je ne veux pas y mettre beaucoup d'efforts.

J'espère que vous pourrez m'aider avec cela, car aucune de mes solutions n'a fonctionné.

Peu importe, si je l'utilise sur une table ou div aussi longtemps que la solution fonctionne.

Merci beaucoup

Answer 1

vous pouvez utiliser la propriété border-raduis, pour votre cas, vous pouvez utiliser la propriété border-top-right-radius définit la forme de la bordure du coin supérieur droit .

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

Je ne sais pas comment cela est dynamique, mais j'utiliser un élément ::after absolu, faites pivoter, puis « pousser » en place avec right et top. Vous auriez besoin de changer le droit et le haut chaque fois que vous changez le degré.

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>