纯CSS实现提示框小三角
2015-08-08 19:51
661 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title></title>
<style type="text/css">
.box{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;}
.box .jt{border-width:0 10px 10px;border-color:#EEEEEE #FFFFFF;border-style:solid;width:0;height:0;font-size:0;position:absolute;left:50px;top:-10px;_top:-12px;}
.box2{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border:1px solid #CCCCCC;}
.box2 .jt{position:absolute;color:#CCCCCC;left:50px;top:-12px;font-size:22px;font-family:arial,verdana,sans-serif;}
.box2 .jt2{position:absolute;color:#EEEEEE;top:1px;left:0;}
.box3{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;}
.box3 .jt{border-width:0 0 15px 30px;border-color:#EEEEEE #FFFFFF;border-style:solid;width:0;height:0;font-size:0;position:absolute;left:-30px;top:25px;}
.box4{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;}
.box4 div{width:0;height:0;font-size:0;position:absolute;}
.box4 .jt{border-width:10px;border-color:#FFF #EEE #EEE #FFF;border-style:solid;left:-20px;top:20px;}
.box4 .jt2{border-width:5px 10px ;border-color:transparent #FFF #FFF transparent;border-style:dashed solid solid dashed;left:-20px;top:30px;}
</style>
</head>
<body>
<div class="box">
<div class="jt"></div>
</div>
<div class="box2">
<span class="jt">◆<span class="jt2">◆</span></span>
</div>
<div class="box3">
<div class="jt"></div>
</div>
<div class="box4">
<div class="jt"></div>
<div class="jt2"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title></title>
<style type="text/css">
.box{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;}
.box .jt{border-width:0 10px 10px;border-color:#EEEEEE #FFFFFF;border-style:solid;width:0;height:0;font-size:0;position:absolute;left:50px;top:-10px;_top:-12px;}
.box2{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border:1px solid #CCCCCC;}
.box2 .jt{position:absolute;color:#CCCCCC;left:50px;top:-12px;font-size:22px;font-family:arial,verdana,sans-serif;}
.box2 .jt2{position:absolute;color:#EEEEEE;top:1px;left:0;}
.box3{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;}
.box3 .jt{border-width:0 0 15px 30px;border-color:#EEEEEE #FFFFFF;border-style:solid;width:0;height:0;font-size:0;position:absolute;left:-30px;top:25px;}
.box4{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;}
.box4 div{width:0;height:0;font-size:0;position:absolute;}
.box4 .jt{border-width:10px;border-color:#FFF #EEE #EEE #FFF;border-style:solid;left:-20px;top:20px;}
.box4 .jt2{border-width:5px 10px ;border-color:transparent #FFF #FFF transparent;border-style:dashed solid solid dashed;left:-20px;top:30px;}
</style>
</head>
<body>
<div class="box">
<div class="jt"></div>
</div>
<div class="box2">
<span class="jt">◆<span class="jt2">◆</span></span>
</div>
<div class="box3">
<div class="jt"></div>
</div>
<div class="box4">
<div class="jt"></div>
<div class="jt2"></div>
</div>
</body>
</html>
相关文章推荐
- HTML/CSS 清浮动的方法
- HTML/CSS 块、内嵌、浮动、定位元素的特点对比
- HTML/CSS 选择符优先级
- HTML/CSS IE6、7兼容性问题、bug总汇
- CSS hack样式兼容模式收藏
- HTML CSS的兼容性问题、IE6BUG之浮动与定位篇
- HTML CSS的兼容性问题、IE6BUG之外边距篇
- PhpStorm快捷键设置,个性化设置,多项目共存,更改样式主题字体
- CSS @font-face规则 引用外部服务器字体
- css样式规范
- sublime安装less2css,保存less文件同时生成对应css文件
- div+css知识点
- CSS布局自适应等分比例实践
- 【CSS3】 线性渐变
- CSS复习第一天(简单规范)
- 将Activity设置成窗口的样式
- HTML学习笔记(3)——CSS的引入,选择器和文本样式
- CSS字体设置
- css3绘制中国结
- HTML与CSS_基础 翁恺 笔记(2015.8.10更新)