`
ylz4647
  • 浏览: 48610 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

转：纯CSS圆角 箭头 三角形 多边形 — CSS border的运用

    博客分类：
  • CSS
 
阅读更多

To 原创作者，由于资料是早期收藏，原始地址已丢失，请见谅！

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>纯CSS圆角 箭头 三角形 多边形 — CSS border的运用</title>

<meta name="description" content="" />

<meta name="keywords" content="" />

<style type="text/css">

 

#demo1{position: relative;margin: 50px;width: 200px;}

#demo1 s{position: absolute;right:20px;bottom:-30px;width: 0;height: 0;overflow: hidden;border-color: #6cf #6cf transparent transparent;border-width: 15px;border-style:solid solid dashed dashed ;}

 

#demo1 b{position: absolute;right:20px;bottom:-30px;width: 0;height: 0;overflow: hidden;border-color: #fff #fff transparent transparent;border-width: 15px 5px;border-style: solid solid dashed dashed;}

.rc_top{height: 0;overflow: hidden;border-color: transparent transparent #6cf;border-width: 3px;border-style: dashed dashed solid;border-top: 0;}

.rc_btm{height: 0;overflow: hidden;border-color: #6cf transparent transparent;border-width: 3px;border-style: solid dashed dashed;border-bottom: 0;}

.rc_bd{height: 100px;padding: 10px;background: #6cf;color: #333;}

 

#demo2{width: 0;height: 0;margin: 60px;border-color: transparent transparent #f60;border-style: dashed dashed solid;border-width: 0 30px 50px 120px;}

 

#demo3{margin: 60px;}

#demo3 s{display: block;width: 86px;height: 0;overflow: hidden;border-color: transparent transparent #c6f;border-style: dashed dashed solid;border-width: 0 50px 86px; }

#demo3 b{display: block;width: 86px;height: 0;overflow: hidden;border-color:#c6f transparent transparent ;border-style: solid dashed dashed;border-width:  86px 50px 0; }

 

</style>

</head>

 

<body>

 

<div id="demo1">

<div class="rc_top"></div>

<div class="rc_bd">

锦瑟无端五十弦

</div>

<s></s>

<b></b>

<div class="rc_btm"></div>

</div>

 

<div id="demo2">

 

</div>

 

<div id="demo3">

<s></s>

<b></b>

</div>

</body>

</html>

分享到：
| 滚动条自动加载
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics