est-il possible d'avoir plusieurs couleurs de fond pour une cellule de table comme dans l'image ci-dessous?
Two Color Table Cell Fond semble faire quelque chose comme ce que je veux mais ça n'est pas exactement diagonal.
3 Réponses :
Vous devez ajouter un degré de rotation au gradient linéaire. Notez que cela dépend de la hauteur de l'élément p> td code>. "FAUX">
<table>
<tr>
<td>
Two Color Background
</td>
</tr>
</table>
Vous pouvez également utiliser le sur [côté] [côté] Syntaxe pour maintenir la coloration diagonale indépendante des dimensions du TD :)
Merci pour la suggestion, Harry. Tu es le meilleur! :)
Comme dans ce jsfiddle , il vous suffit de définir des angles de gradient comme p> 33deg Code> Pour faire correspondre les coins dans mon exemple
<table>
<tr>
<td>Two Color Background</td>
</tr>
</table>
Les deux réponses existantes sont bonnes et cela n'est pas tenter de les mettre de quelque manière que ce soit. C'est une amélioration sur eux qui peut être utilisée si vous souhaitez une conception réactive avec des gradients.
Comme déjà mentionné dans les deux autres réponses (et vue dans l'extrait ci-dessous), les angles du gradient doivent être modifiés si la hauteur ou la largeur de Les modifications Le texte à l'intérieur nécessiterait un positionnement supplémentaire pour le faire apparaître exactement comme dans la question. P> td code>. Il s'agit d'un inconvénient lorsque la conception doit être réactive, mais elle peut être évitée lors de l'utilisation du sur [côté] [côté] code> syntaxe de gradient au lieu de gradients inclinés. Cette syntaxe peut s'adapter à tout changement de dimensions. P>
<!-- prefix library included only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
</table>
<table>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
</table>
<table>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
</table>
@HENRY - Juste génial, en fait, je devais demander la même chose, car je viens de rencontrer cette question. Merci beaucoup !
@Parimalraj: Vous êtes bienvenu PAL. Toujours heureux d'être d'aide :)
Une petite question, pourquoi 49% et 50% , pourquoi pas 50% et 51% ?
@Parimalraj: 50%, 51% signifierait que la couleur suivante commencerait légèrement les bords. Je pense que 49,5% 50,5% pourrait être plus apte. Laissez-moi vérifier en code. (La différence entre les pourcentages consiste à lisser les bords déchiquetés qui ont tendance à entrer dans tous les navigateurs avec des gradients diagonaux ou inclinés).
@HENRY - Merci, comprise, gradient semble génial, fera plus de temps pour avoir une meilleure commande sur le gradient CSS.