CSS usando rotate

[Lizeb 0]

Boa tarde Galera,

 

estou com um dificuldade no css usando rotate

 

preciso com que o bgcolor fique visualmente até a base da linha, pois quando eu boto as informações na <td> de baixo fica um "triangulo" vazio.

 

segue o codigo

 

.rotation
{
-ms-transform: rotate(-50deg); /* IE 9 */
    -webkit-transform: rotate(-50deg); /* Chrome, Safari, Opera */
    transform: rotate(-50deg);
}


<table width="1700">
<tr>
     <td width="100">ID</td>
        <td width="300"><h1>Atividade</h1></td> 
        <td class="rotation" bgcolor="#996600" width="100">Retrieval - TI</td>
        <td class="rotation" bgcolor="#99CC33" width="100">CSE - Gravadores</td>
        <td class="rotation" bgcolor="#CC3366" width="100">CSC - AI</td>
        <td class="rotation" bgcolor="#CC6699" width="100">CSC - NOC</td>
        <td class="rotation" bgcolor="#FF6633" width="100">CSC - GRAVADORES</td>
        <td class="rotation" bgcolor="#CCFFCC" width="100">PRD TI - Gest. Ambiente</td>
        <td class="rotation" bgcolor="#339999" width="100">PRD TI - BKP</td>
        <td class="rotation" bgcolor="#009999" width="100">Operações - Retrieval Op.</td>
        <td class="rotation" bgcolor="#66CC66" width="100">Field Services - Sites</td>
        <td class="rotation" bgcolor="#0066FF" width="100">Projetos / Engenharia</td>
        <td class="rotation" bgcolor="#99CC00" width="100">Qualidade</td>
        <td class="rotation" bgcolor="#FFFF33" width="100">Telemetria</td>
        <td class="rotation" bgcolor="#9933CC" width="100">Operações</td>                  
    </tr>
</table>

obrigado pelo apoio

[rikaschmitt 54]

Não entendi direito qual o problema.

Você rotacionou a <td>, dai criou aquele espaço em branco embaixo de cada uma... você não quer ele?

[Lizeb 0]

exato, isso mesmo! quero que ele fique preenchido

[L. Henrique 179]

Normalemente não tem como, você precisa esticar a largura dele, alinhar o texto ao centro e adicionar uma div abaixo da tabela, assim você adiciona um background: white; na div e faz parecer como se fosse o fundo. Na maior parte dos casos nem essa solução pode funcionar, ele pode simplesmente jogar as td's para o lado ao invés de aumentarem sua largura.

Não é aconselhável fazer isso, é mais fácil dar um rotate somente no texto ao invés de usar na td.

[Lizeb 0]

Consegui uma forma usando div

 

<div style="transform: skewx(-50deg) translatex(150px); transform-origin: bottom right;" >

<img src="../images/teste.jpg">

</div>

Porem com imagem de fundo, pois não consegui que o texto inclinasse... nem mesmo usando a classe "rotation" abaixo num <span> ou <td>

.rotation

{

-ms-transform: rotate(-50deg); /* IE 9 */

-webkit-transform: rotate(-50deg); /* Chrome, Safari, Opera */

transform: rotate(-50deg);

}