本文介绍如何使用CSS3在五分钟内创建一个折叠丝带效果。通过简单的HTML标记和CSS样式，可以实现一个美观且兼容多种现代浏览器的丝带元素。
swish pytorch
进行一行标记，几个CSS3规则（无图像），您可以在五分钟之内完成折叠效果。 让我们看看如何。
步骤1：标记
我们将从一个空HTML文档开始； doctype，字符集声明，头，主体，通常的嫌疑人。 您还会注意到，我们正在链接到Google Web Fonts API，因此我们可以使用装饰精美的Montez字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swish CSS3 folded ribbon effect.</title>
<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>
</head>
<body>
</body>
</html> 现在，我们将添加功能区元素。 是的，一个要素，这就是我们所需要的。 在这种情况下，我们使用h1标头：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swish CSS3 folded ribbon effect.</title>
<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>
</head>
<body>
<h1 class="ribbon">Swish CSS3 folded ribbon effect.</h1>
</body>
</html>步骤2：以某种风格搅拌
打开一个新CSS文件，链接到它的head文档，再跳进加入一些样式。
html {
background: url(black-linen.png); /* Black Linen http://subtlepatterns.com */
}
body {
margin: 0;
padding: 100px 0 0 0;
}
.ribbon {
padding: 0 25px;
height: 80px;
background: #c94700;
color: #301607;
position: relative;
float: left;
clear: left;
font-family: 'Montez', cursive;
font-size: 32px;
line-height: 80px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}为了演示的目的，我们从样式化html和主体开始（是的，我使用背景图像，但是功能区本身是100％无图像的）。
然后，我们将注意力转向功能区元素。 我们给它左右一些填充，但是我们对高度（在本例中为80px）非常具体，因为我们需要在以后的折叠端复制高度。 我们还将行高指定为80px，以使文本在功能区上垂直居中。 我们浮动并清除它，以便我们可以在页面边缘显示多个。
注意：如果出于某种原因，您不想浮动功能区，请对其进行display: inline-block; 。 这将导致它被当作内联元素处理（不会填满其父元素），同时表现得像块级元素一样，允许您定义宽度，高度，内边距，边距等。
看起来已经足够好了，是吗？
步骤3：折页
我们将针对流行的:after伪选择器来增加倍数。 他在这里..
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 20;
border-bottom: 80px solid #de6625;
border-right: 80px solid transparent;
}
看见？
那么，我们刚刚制造的奇怪的刀片状东西到底是什么？它对我们有什么帮助？ 这是边界，即:after伪元素的底部边界，我们将其厚度设为80px以匹配功能区的高度。 通过定义相邻的右边界并提供有意的透明背景（并非不常见的技巧），我们将其边缘切成45°。 我们给了它40px的宽度，它决定了矩形的末端。 图表将使这一点更加清晰：
我们的元素是如何构造的
步骤4：转台
建立了可折叠钻头之后，我们现在需要对其进行枢轴旋转。 为此，我们将使用CSS3转换属性并对其进行旋转，如下所示：
没有图表的世界会在哪里？
默认情况下，对元素进行旋转将使其绕中心轴旋转-我们需要围绕其右下角旋转它，这就是为什么我们将其定位在功能区的右下角。
这是更新后的语法，带有一堆特定于供应商的规则，以确保满足所有可能的浏览器的要求：
highlight="41-50"
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 20;
border-bottom: 80px solid #de6625;
border-right: 80px solid transparent;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(90deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(90deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(90deg);
-ms-transform-origin: right bottom;
transform: rotate(90deg);
transform-origin: right bottom;
} 每个transform:rotate属性都会transform:rotate我们的对象扭曲90°。 每个transform-origin属性均声明要围绕右下角旋转。
那么，看起来怎么样？
甜！
我们拥有一个简单而有效的功能区，它将很高兴在以下浏览器中呈现：
- Firefox 3.5+
- 歌剧10.5
- Safari 3.1+
- Chrome
- IE9
IE9之下的所有内容目前都不会与我们已应用CSS3转换相抵触，但是有一种MS过滤器形式的解决方法。 我不会在这里研究过滤器，但是如果您需要使用IE4或更高版本， 请查看CSS3！ 看看它们在操作中的巧妙示例。
第5步：黑影飘落
为了给效果添加一些尺寸，让我们在襟翼下方放置一个阴影（我仍然不知道该怎么称呼）。
这再简单不过了，我们将使用功能区中的:before伪元素，然后或多或少地重复我们对:after所做的工作； 创建黑色版本的形状，将其稍微旋转一点，并确保（使用z-index ）将其放置在原始形状下。
.ribbon:before {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 10;
border-bottom: 80px solid #000000;
border-right: 80px solid transparent;
-webkit-transform: rotate(80deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(80deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(80deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(80deg);
-ms-transform-origin: right bottom;
transform: rotate(80deg);
transform-origin: right bottom;
}这是我们得到的：
第6步：微妙，真实的微妙
最好的办法是通过缩短阴影并使其不透明来降低阴影的效果。
.ribbon:before {
content: "";
display: block;
width: 20px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 10;
border-bottom: 80px solid rgba(0, 0, 0, 0.3);
border-right: 80px solid transparent;我们已经将＃000000的边框颜色替换为它的RGBA等效色，（再次）对于所有上述现代浏览器（包括IE9）都很好。 如果要满足IE的早期版本，则需要再次使用MS过滤器应用效果。 以下代码段是一个示例：
/* required to trigger hasLayout for IE 5, 6, 7 */
zoom: 1;
/* and this makes the whole lot 30% opaque */
filter: alpha(opacity=30);我们还向功能区本身添加一个类似的阴影。
.ribbon {
padding: 0 25px;
height: 80px;
background: #c94700;
color: #301607;
position: relative;
float: left;
clear: left;
font-family: 'Montez', cursive;
font-size: 32px;
line-height: 80px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
}..这给了我们这个：
第7步：突出显示
我们已经建立了有效的功能区，您可能希望按原样使用它。 在我们称之为完成交易之前，让我们先来看几个其他方面。
.ribbon {
padding: 0 25px;
height: 80px;
color: #301607;
background-color: #c94700;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100));
background-image: -webkit-linear-gradient(top, #c94700, #b84100);
background-image: -moz-linear-gradient(top, #c94700, #b84100);
background-image: -ms-linear-gradient(top, #c94700, #b84100);
background-image: -o-linear-gradient(top, #c94700, #b84100);
background-image: linear-gradient(top, #c94700, #b84100);
border-bottom: 1px solid rgba(255, 255, 255, 0.3); 在这里，我们在功能区上有一个微妙的渐变填充，并为不支持（-IE10）的浏览器提供了各种供应商前缀和background-color回退。 我们还向功能区的底部添加了带有高光边框的高光闪烁。
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: -1px;
z-index: 20;添加边框后，我们有效地将功能区提高了1px，因此我们需要将折叠的东西撞一下。
第8步：蓬勃发展
如果您想真正发疯，为什么不放松折叠呢？ 圆角不平整和定位调整很容易做到。
border-bottom-right-radius: 20px 5px;那是圆角
bottom: 4px;bottom: 4px;这就是折叠位，加上阴影，略微抬起以说明更改。
功能区中的细微但有效的弯曲
结论
而已！ 无话可说-试试吧，让我知道您的想法。 与往常一样，感谢您的关注！
swish pytorch
扫一扫
954
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
