使用CSS弯曲div

Question

可以用CSS弯曲div吗？

某种 webkit 转换...

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

编辑：

用例 - 我想在这个 div 上放置一个线性渐变，并让渐变绕回自身，就像在游戏《贪吃蛇》中一样，它追着尾巴……

Answer 1

目前，仅靠 CSS 是不可能做到这一点的。你最好的选择是使用

canvas

（和一些 Javascript）。

2023 年 8 月更新：

仅使用 CSS 这仍然是不可能的（很高兴被证明是错误的）。您可以做一些有趣的事情，但它们都取决于边框、边框半径等。

参考资料：

Answer 2

如果不使用边框半径技巧，你似乎无法做到：

边框半径技巧是我喜欢的，

Answer 3

如果您希望文本弯曲，那么这是 SVG 的“路径上的文本”功能造成的问题。（或画布）。享受吧。

Answer 4

THREE.js

和 HTML5 canvas 标签。您可以轻松地弯曲并用它制作动画。查看示例。玩得开心！

三个.js 示例