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;
}
Possible duplicate of CSS DIV diagonal
– Bsalvo
If you only want to tilt the right corner, simply rotate -10deg and compensate for the difference in the margin
– Felipe Duarte
Thanks Felipe Duarte, that’s right! I added the -10deg and compensated through the margin-left and resolved thank you!
– Diego Lela