<!doctype html>
<html lang="zh">
<head>
<title>预览最终生成的CSS彩带效果</title>
<meta charset="UTF-8" />
<meta author="极客标签：www.gbtags.com" />
<meta name="Description" content="极客标签是一个基于web的在线极客编程知识分享&学习平台，能够帮助你快速高效地学习代码编程并方便的在线实时分享编程技巧和心得" />
<meta name="Keywords" content="极客,极客标签,轻视频,代码录播,在线调试,前端,前端社区,前端特效,素材,html5,javascript,css3,jquery,bootstrap,bootstrap3" />
<style>
/* 彩带主体样式 */
.ribbon {
font-size: 14px !important;
font-family: 'microsoft yahei',Arial,sans-serif;
font-weight: normal;
max-width: 50%;
position: relative;
background: orange;
color: #fff;
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
/* 彩带左右伪选择器生成的领结花 */
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #efb73e;
z-index: -1;
}
/* 定位领结花 */
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
/* 生成领结阴影 */
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #999 transparent transparent transparent;
bottom: -1em;
}
/* 定位阴影位置 */
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
</style>
</head>
<body>
<h1 class="ribbon">
<span class="ribbon-content">CSS3实现的彩带效果</span>
</h1>
<script>
</script>
</body>
</html>
浙公网安备 33010602011771号