Css How to Leave the Right Side of the Slanted Div?

Asked

Viewed 987 times

1

I have a demand in which I need to leave only one right side of an inclined div, that is, diagonally. How do I achieve this effect?

While researching, I saw that I could use the code below to tilt the div, but my problem is that the code tilts the entire div, but I want only the right side tilted.

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

Here’s my CSS code

.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;  
}
  • 2

    Possible duplicate of CSS DIV diagonal

  • 1

    If you only want to tilt the right corner, simply rotate -10deg and compensate for the difference in the margin

  • Thanks Felipe Duarte, that’s right! I added the -10deg and compensated through the margin-left and resolved thank you!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.