边角透明化

[cssmagic]

目前的两个小缺憾：

• 边角不透明
• 在页面缩放时，边角容易出现残影线条

它们其实源自同一个问题——现有的折角效果是使用遮挡实现的。

我周末粗略思考了一下，要实现边角透明化，动作会比较大。

• 首先布局方式会很复杂，我就不太乐意写裸 CSS 了（我会采用 Stylus 来做一些布局计算），这意味着源码格式会变。
• 另一方面，改变布局方式之后，自定义颜色的方式会变化（改为 color 属性），虽然似乎语义更好，但毕竟是改变了现有接口。

鉴于以上原因，我没有冒然提一个 PR 上来。如果作者可以接受上述两大改动，我会写好 PR 发上来；如果不愿意，我可以写个透明边角的 demo，然后作者自己完成后绪工作。

[picturepan2]

如果可以的话，能否抽空写个透明边角的 demo，或者交流下实现的思路。目前想的是能保持精简代码还是尽量不去搞复杂的，除非实在效果不理想。谢谢。

[cssmagic]

我写了一个 Demo，实现了边角透明：
http://output.jsbin.com/kucawo/4

但我对目前的方案仍然不满意，会想办法再改进。

[picturepan2]

赞，右上角已经透明，谢谢思路。不满意的是缩放之后仍有残影吗？

[ykadosh]

Hi, it looks like you are having issues with filecons, but I can’t read Chinese (and google translate does not do a very good job)

On Aug 7, 2015, at 11:17 AM, 朱龑 [email protected] wrote:

赞，右上角已经透明，谢谢思路。不满意的是缩放之后仍有残影吗？

—
Reply to this email directly or view it on GitHub #2 (comment).

[cssmagic]

不满意的地方是实现方法略繁琐。我相信一定会有更优雅的方案。努力追寻中！

[Kiris-tingna]

希望能扩充其他类型图标方案

[houfeng0923]

赞

[champkeh]

用阴影实现了一个，不过缺点是缩放时右上折角处的下方会出现间隔
http://output.jsbin.com/fuxesu/1
只用了after伪类，我没有写文字，文字可以用before伪类来写

注：
IE8不支持阴影，故IE8及之前版本无效

[picturepan2]

👍赞

[cssmagic]

@champkeh
做得不错。还可以想想有哪些地方是可以继续改进的。 😉

[champkeh]

昨天抽空看了一下《CSS Secrets》，里面的视觉效果这一章就谈到了折角的效果，用到了_线性渐变_、rgba颜色_和_变形。并且可以做出各种角度的折角，不止是45度。

我做了一个demo，一个45度，两个30度(折叠方向不同)。
http://output.jsbin.com/xexexe/4
也是只用了一个伪元素，没有写文字。

最后，非常感谢 魔法哥，感谢你分享了CSS Secrets这本书。这本书真的是好书。

[CheneyWong]

用 svg 做一套吧