用CSS弯曲div [英] Bend a div with CSS

问题描述

是否可以使用CSS弯曲div?

Is it possible to bend a div with CSS?

某种Webkit转换...

Some sort of webkit transform...

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

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

用例-我想在此div上放置一个线性渐变，然后使渐变自动回绕，就像在游戏Snake中一样，追逐它的尾巴……

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...

推荐答案

当前，仅使用CSS不可能做到这一点.最好的选择是利用canvas(和一些Javascript).

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/

这篇关于用CSS弯曲div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！