1

Estou com uma demanda na qual preciso deixar somente um lado direito de uma div inclinado, ou seja, na diagonal. Como consigo esse efeito?

Ao pesquisar, vi que poderia usar o código abaixo para inclinar a div, mas o meu problema se dá no fato do código inclinar toda a div, mas que quero que apenas o lado direito seja inclinado.

-ms-transform: skew(30deg);
-webkit-transform: skew(30deg); 
transform: skew(30deg); 
transform-origin: bottom left;

Eis meu código CSS

.logo-topo{
    position:fixed;
    background-color:rgba(255, 255, 255, .7);   
    float:left;
    height: 165px;
    margin-left: -138px;
    width: 299px;
    z-index: 805;   
    -ms-transform: skew(30deg);
    -webkit-transform: skew(30deg); 
    transform: skew(-30deg); 
    transform-origin: bottom left;
    border-width: 10px 50px 90px;  
}
3
  • 2
    Possível duplicata de CSS DIV diagonal
    – Bsalvo
    Commented 14/07/2017 às 17:08
  • 1
    Se pretende somente inclinar o canto direito, basta rotacionar -10deg e compensar a diferença na margem Commented 14/07/2017 às 17:13
  • Obrigado Felipe Duarte, Era isso mesmo! adicionei os -10deg e compensei através do margin-left e resolveu obrigado!
    – Diego Lela
    Commented 14/07/2017 às 21:08

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .