井井客

搜索

纯css边框三角形

网上搜索整理了一些关于利用:after和:before两个伪类制作纯CSS的边框三角形的常见案例,兼容的JS代码抽空再整理出来。

纯css边框三角形

下面是没有兼容Ie8及以下的普通代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css边框三角形</title>
<style>
body,div,p { padding:0; margin:0;}
body { overflow:hidden; padding-top:50PX;}
div { position:relative; margin:0 auto 30px; text-align:center;}
p { position:relative; z-index:2; color:#fff;}

.box1 { width:100px;}
.box1 p { height:100px; line-height:100px; background:#66f; border-radius:50px; }
.box1:after { position:absolute; bottom:-25px; left:50%; margin-left:-16px; content:''; width:0; height:0; border:16px solid; border-color:#66f #fff #fff #fff; z-index:1;}

.box2 { width:400px;}
.box2 p { height:40px; line-height:40px; background:#6C3; border-radius:5px;}
/* 右边的三角 */
.box2:before { position:absolute; top:50%; right:-16px; margin-top:-8px; content:''; width:0; height:0; border:8px solid; border-color:#fff #fff #fff #6C3; z-index:1;}
/* 左边的三角 */
.box2:after { position:absolute; top:50%; left:-16px; margin-top:-8px; content:''; width:0; height:0; border:8px solid; border-color:#fff #6C3 #fff #fff; z-index:1;}

.box3 { width:400px;}
.box3 p {height:40px; line-height:40px; background:#36f; border-radius:5px;}
.box3 i { position:absolute; bottom:-16px; content:''; width:0; height:0; border:8px solid; z-index:1;}
.box3 i.after { left:25%; border-color:#36f #fff #fff #36f;}
.box3 i.before {right:25%; border-color:#36f #36f #fff #fff;}

.box4 { width:450px; height:150px; background:#fbf5ec; border:2px solid #ffab59;}
.box4:after,.box4:before { position:absolute; top:10%; right:-28px; content:''; width:0; height:0; border:14px solid transparent; border-left-color:#ffab59; z-index:1;}
.box4:before { z-index:2; border-left-color:#fbf5ec; right:-25px;}
</style>
</head>
<body>
    <div class="box1">
        <p>这是一个圆</p>
    </div>
    <div class="box2">
        <p>这是一个对话泡</p>
    </div>
    <div class="box3">
        <p>这是一个对话用的框</p>
        <i class="after"></i>
    </div>
    <div class="box3">
        <p>这也是一个对话用的框</p>
        <i class="before"></i>
    </div>
    
    <div class="box4">
    	这是一个空心的三角
    </div>
</body>
</html>

效果图如下:

纯css边框三角形

代码主要围绕的是边框-变白或透明,然后将尖角相对的方向反向的边框颜色设置,基本就差不多了。

不过光这么写的话兼容会略差,接下来有时间的话会把兼容这个的Js代码整理出来~

文章TAG:CSS

作者:井井客整理来源:互联网
本文标题:纯css边框三角形
本文链接:http://www.jingjingke.com/c/12124.html

上一篇:JQ自制手机端横向标题滚动切换选项卡
下一篇:IE7中fixed位置偏移 神奇的BUG!

文章分类

相关阅读

随便看看