2011-12-20 51 views
2

Camille-ascencio-parvy-lemoineanswer to my old question to make ribbon但现在我需要做的色带翻转这样如何给这个倾斜的CSS丝带环绕看看?

enter image description here

播放用的jsfiddle这里http://jsfiddle.net/aNmvc/8/

这个问题我只要求做翻转角落。丝带的其他东西并不是必需的答案

+0

如果你想让它看起来完全像你提供的图像(斜角,白光和小翻转角),你将不得不使用图像。 – ptriek 2011-12-20 11:49:29

+0

@ptriek - 这个问题,我只要求让翻转角 – 2011-12-20 11:50:35

回答

1

编辑:这样做的方式使它有点难以发挥职位。这就是我想到的一个非常简单的浮动色带:http://jsfiddle.net/aNmvc/13/,不完全完美。如果你想制作一个3D色带,你将不得不使用三角形来模仿折叠的纸张。希望能帮助到你!

更多关于3D丝带:https://stackoverflow.com/questions/8456575/3d-ribbon-corners-how-to-do

+0

功能区已经在单独的div'

Best Ribbon around
' – 2011-12-20 11:28:04

+0

但丝带没有显示它在你的小提琴链接 – 2011-12-20 12:07:44

+0

编辑它!对于那个很抱歉! – Yisela 2011-12-20 12:15:05

4

检查此琴:http://jsfiddle.net/zNCEr/5/

新增2个旋转跨度,并将它们放置以便模拟一个包装丝带!

仅在FF中测试。

+0

优秀的答案! – Yisela 2011-12-20 12:19:11

+0

@techfoobar - 太好了。它会灵活吗?我正在使用的网站是响应式的,因此该框将是流动的,并且文本大小将会增加。 – 2011-12-20 12:41:24

+0

@Jitendra Vyas - 是的,我相信。要测试,您可以打开此链接:http://fiddle.jshell.net/zNCEr/5/show/在FF或Chrome中,并通过使用Ctrl +滚轮模拟文本大小增加/减少 – techfoobar 2011-12-20 12:54:26