Menu
I want to be able to skew an element in the way the image displays below.
I have been playing around with it, but dont seem to be able to get close to replicating that shape.
My css code is
transform:skew(30deg,30deg); Is transform even the right way to do this? Please let me know the best, most browser compatible, solution.
358
CSS Code: In this section, we will first design the div element using some basic CSS properties and then use the border-bottom, border-left and border-right properties to create the trapezium shape.
CSS | skew() FunctionThe skew() function is an inbuilt function which is used to transform an element in the 2D plane. Skew an element means to pick a point and push or pull it in different directions. Parameters: ax: This parameter holds the angle representing the horizontal axis to distort an element.
Give your <img> the opposite skew of your div by adding transform : skewY(2deg); . This will only skew the bottom of your image. @Chris The padding is needed in order to hide part of the skew. If you want your image to closer to the top, you can remove the margin, or even give it a negative value like here.
CSS Demo: skew() This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. The effect is as if you grabbed each corner of the element and pulled them along a certain angle.
You can apply some rotate transform around the X axis and apply an appropriate pespective before:
div { width:300px; height:200px; background:url(http://placekitten.com/300/200); border:2px solid red; border-top-width:4px; border-bottom-width:1px; -webkit-transform: perspective(200px) rotateX(40deg); margin:100px; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
