使用CSS弯曲div

时间:2011-12-15 23:45:09

标签: css webkit

是否可以使用CSS弯曲div?

某种webkit转换......

我想创造的效果是一个环形甜甜圈形状,但由一个弯曲的div组成,而不是边框​​半径/边框技巧

编辑:

用例 - 我想在这个div上添加一个线性渐变,并让渐变回绕自身,就像游戏中的Snake一样,它会追逐它的尾巴......

4 个答案:

答案 0 :(得分:3)

目前,仅使用CSS无法做到这一点。你最好的选择是使用canvas(和一些Javascript)。

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

http://www.roblaplaca.com/examples/bezierBuilder/

答案 1 :(得分:0)

如果不使用border-radius技巧,它看起来就像你一样:

http://www.w3schools.com/css3/css3_2dtransforms.asp

border-radius技巧是我喜欢的技巧,

http://jsfiddle.net/charlescarver/ea3An/

答案 2 :(得分:0)

如果您希望文本曲线,那么这是SVG Text on a Path功能的问题。 (或画布)。享受。

答案 3 :(得分:-1)

我建议使用 THREE.js HTML5画布标记。您可以轻松地弯曲和动画。看看这些例子。玩得开心!

THREE.js Examples