Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
exato, isso mesmo! quero que ele fique preenchido
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.
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 transform: rotate(-50deg);
}
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?