使用 css 和边框和淡入淡出的折叠横幅 [关闭]答案

【问题标题】：Folded banner using css and border and fade [closed]使用 css 和边框和淡入淡出的折叠横幅 [关闭]
【发布时间】：2013-09-14 06:40:50
【问题描述】：

我正在尝试弄清楚如何使用 css 制作带有红色边框的折叠横幅。

可以对下图做一个类似的吗？

【问题讨论】：

是的，是的。完全没有问题。
我知道您已经有了答案，但是您尝试了哪些方法，结果如何？它可能会帮助某人了解尝试了哪些代码以及结果是什么，他们可能正在寻找类似的东西，而您可以通过展示不适合您的内容来向他们提供他们正在寻找的答案。

标签： css

【解决方案1】：

我会要求您真正尝试按照您的要求去做，而不是让其他用户为您编写代码。话虽如此，我认为最棘手的部分是在底部实现三角形部分。要在 CSS 中执行此操作，请参阅此链接：

http://css-tricks.com/snippets/css/css-triangle/

【讨论】：

我不明白为什么这被否决了。实际上，我在想同样的事情。

【解决方案2】：

嘿，有一个关于 Tutsplus 的不错的教程，可能是一个很好的入门。 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-practical-css-shapes/

这里的演示： http://s3.amazonaws.com/nettuts/676_cssShapes/shapes.html

【讨论】：

【解决方案3】：

可以用伪元素来完成。

jsFiddle Demo

div::before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    right: 0;
    bottom: -12px;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #AA0000;
}

【讨论】：