正文
纯css3的上下左右提示框几种方法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
经常用到三角形提示框，用图片吧，大小框不定，所以，css自己写了，可设置宽高比，就可自适应了。
图形例子如下：
css代码如下
<style type="text/css">
/* 基本样式 */
.tipleft {
background:#fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
position: relative;
width: 200px;
}
/**左边**/
.tipleft:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -8px;
top: 20px;
content: '';
}
/* 背景阴影*/
.tipleft:after {
position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: -6px;
top: 21px;
content: '';
}
/**右边**/
.tipright{
background:#fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
position: relative;
width: 200px;
}
.tipright:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-left: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
right: -8px;
top: 20px;
content: '';
}
/* 背景阴影*/
.tipright:after {
position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-left: 6px solid #fff;
border-bottom: 6px solid transparent;
right: -6px;
top: 21px;
content: '';
}
/**上边**/
.tiptop{
background:#fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
position: relative;
width: 200px;
}
.tiptop:before {
position: absolute;
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top:7px solid #111;
left:18px;
bottom: -7px;
content: '';
}
/* 背景阴影*/
.tiptop:after {
position: absolute;
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #fff;
left:18px;
bottom: -7px;
content: '';
}
/**下边**/
.tipbottom{
background:#fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
position: relative;
width: 200px;
}
.tipbottom:before {
position: absolute;
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom:7px solid #111;
left:18px;
top: -7px;
content: '';
}
/* 背景阴影*/
.tipbottom:after {
position: absolute;
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #fff;
left:18px;
top:-7px;
content: '';
}
/****第二种方法*/
#sanjiaotip {
text-indent: 2em;
box-shadow: 0px 0px 10px #999;
padding: 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 5px;
width: 250px;
position: relative;
border: 1px solid #CCC;
margin-left:20px;
}
#sanjiaotip span {
position: absolute;
left: 25px;
height: 0px;
width: 0px;
}
/*右部小三角实现样式开始*/
#sanjiaotip span.right {
background: #FFF;
border-width: 1px;
width: 16px;
height: 16px;
border-color: #CCC #CCC transparent transparent;
border-style: solid solid dashed dashed;
left: 270px;
top: 30px;
border-radius: 0 0 100% 0;/*这里radius的值不要选取绝对值因为在放大或者缩小的过程中会产生封不住口的现象*/
line-height:;
box-shadow: 5px 0 10px #aaa;
}
#sanjiaotip span.left {
background: #FFF;
border-width: 1px;
width: 16px;
height: 16px;
border-color:#CCC transparent transparent #CCC ;
border-style:solid dashed dashed solid ;
left:-18px;
top: 30px;
border-radius: 0 0 0 100%;/*这里radius的值不要选取绝对值因为在放大或者缩小的过程中会产生封不住口的现象*/
line-height:;
box-shadow: 0 1px 0 #aaa;
}
</style>
html代码如下：
<h3>方法一</h3>
<div class="tiptop">
上面
</div>
<br>
<div class="tipleft">
左边
</div>
<br>
<div class="tipright">
右边
</div>
<br>
<div class="tipbottom">
下面
</div>
<br>
<h3>方法二</h3>
<div id="sanjiaotip">
<span class="right"></span><span class="left"></span>
<p>测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>
希望对大家有用。
