您的位置：首页 > Web前端 > CSS

用 css 实现提示框的箭头

2016-10-14 00:00 507 查看
用 css 实现提示框上增加箭头

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{font-size: 16px;}
form{
position: relative;
}
input{
width: 10em;
padding: 0.3em 0.8em;
border: 1px solid #ff7d00;
border-radius: .2em;
font-size: 125%;
line-height: 1.5;
}
.callout{
position: relative;
width: 15.5em;
font-size: 90%;
line-height: 1.5;
padding: .3em;
border-radius: .2em;
border:1px solid #ff7d00;
margin-top: 10px;
background: #e2c179;
}
.callout:before{/*给提示框描画出箭头*/
content: "";
position: absolute;
top: -.41em;
left: 1em;
padding: .35em;/*画一个高为0.7em的正方形*/
background: inherit;/*背景色和边框继承提示框的*/
border: inherit;
border-right: 0;/*去掉右和下边框*/
border-bottom: 0;
transform: rotate(45deg);/*旋转45度*/
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="请输入您的姓名">
<div class="callout">
请输入大于三个字符小于10个字符的正确的名字
</div>
</form>
</body>
</html>




这个方法最酷的地方不仅是用纯 css 画出了小箭头，还有就是小箭头的背景和边框用了继承，所以后期即使要修改提示框的背景也很方便，以前居然用图片实现，想想工作量简直巨大。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航