CODEWITHSUNDEEP
csscss-transformscss-shapes
varkor
varkor

Reputation: 509

Lens Shape in CSS

I am attempting to draw a lens shape with CSS, of a certain height and width. In order to produce a continuous curvature, the border radius of the top left and bottom right corners must be 100% and the other corners, 0%. This produces a lens at an angle of 45 degrees. Because it is at this angle, I cannot increase the height or width of the lens individually, without distorting it.

I have experimented with transformations, but the browser always applies the rotation before the scale, so it does not work.

Is there a way I can change the height and width of the lens individually?

I have created a JSFiddle to illustrate what I mean. Shape 1 is the right height, but does not have continuous curvature. Shape 2 has continuous curvature, but is not the right shape. Shape 3 is my attempt at correcting these problems, but which does not work due to the order in which the transformations are being applied:

transform: rotate(45deg) scaleY(1.4);

Upvotes: 0

Views: 1008

Answers (1)

MarcoK
MarcoK

Reputation: 6110

You can simply flip the properties around to determine in which order they are applied:

transform: scaleY(1.4) rotate(45deg);

Updated JSFiddle.

Upvotes: 3

Related Questions