Menu
Is it possible to bend a div with CSS?
Some sort of webkit transform...
The effect i want to create is a have a ring doughnut shape but made up of a curved div as opposed to border-radius/border tricks
EDIT:
Use case - I'd like to put a linear gradient on this div and have the gradient wrap back around on itself, like in the game Snake, where it chases it tail...
780
you can use pseudo elements The border radiuses. The relative/absolute position combination of both elements, with the half-circle (absolute position) being the child of the rectangle. The left and transform settings of the half-circle for the horizontal position in the center.
It's possible to draw circles and arcs in CSS by simply creating a square <div> and setting border-radius to 50%. Each side of the border can take a different color or can be set to transparent . The background-color property sets the shape's fill, if any.
CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.
Currently, this is not possible with CSS alone. Your best bet would be to make use of the canvas (and some Javascript).
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
http://www.roblaplaca.com/examples/bezierBuilder/
81
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
