<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ribbon实现</title>
<style>
/*以下样式只在chrome下最新版本做测试,未做兼容性处理*/
*{ margin:0; padding:0;}
body{ background:#f4f4f4; font:12px/1.6 Georgia, "Times New Roman", Times, serif; color:#999; padding:20px 100px;}/*h2标签中3字下垂字体设置*/
.bubble{ margin:5px auto; width:350px; border-radius:10px; box-shadow:0px 0px 8px rgba(0,0,0,0.3); position:relative; z-index:90;}
.rectangle{ background:#7f9db9; height:50px; width:380px; box-shadow:0px 0px 4px rgba(0,0,0,0.55); z-index:100; position:relative; left:-15px; top:30px;}
.rectangle h2{ line-height:50px; font-size:30px; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.2); text-align:center;}
.bubble:after{ content:''; border:15px solid #7d90a3; border-color:transparent #7d90a3 transparent transparent; height:0; width:0; position:absolute; left:-30px; top:65px; z-index:-1;}
.bubble:before{ content:''; border:15px solid #7d90a3; border-color:transparent transparent transparent #7d90a3; height:0; width:0; position:absolute; right:-30px; top:65px;}
/*对内容中的字体做修饰*/
.info{ padding:60px 25px 35px 25px;}
.info h2{ font-size:20px;}
.info p{ padding-top:10px; font-size:14px; line-height:22px;}
.info p a{ color:#C63; text-decoration:none;}
.info p a:hover{ text-decoration:underline;}
</style>
</head>
<body>
<div class="bubble">
<div class="rectangle">
<h2>3D CSS3 Ribbon</h2>
</div>
<div class="info">
<h2>I have used only css,friends!</h2>
<p>For this tutorial,I have used some new properties.You can realize a nice 3D effect using only css.</p>
<p><a href="#">Go to the tutorial!</a></p>
</div>
</div>
</body>
</html>
效果贴下代码在chrome最新的浏览器中运行下就可以看到了
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
