css的after右箭头,CSS3 使用:after伪元素实现的带指示箭头信息提示框
CSS
语言：
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
.righttip {
position: relative;
}
.righttip:after {
border: 10px solid transparent;
border-left: 15px solid #e74c3c;
position: absolute;
content: "";
top: 50%;
margin-top: -10px;
left: 100%;
}
.lefttip {
position: relative;
}
.lefttip:after {
border: 10px solid transparent;
border-right: 15px solid #e74c3c;
position: absolute;
content: "";
top: 50%;
margin-top: -10px;
right: 100%;
}
.toptip {
position: relative;
}
.toptip:after {
border: 10px solid transparent;
border-bottom: 15px solid #e74c3c;
position: absolute;
content: "";
left: 50%;
margin-left: -10px;
bottom: 100%;
}
.bottomtip {
position: relative;
}
.bottomtip:after {
border: 10px solid transparent;
border-top: 15px solid #e74c3c;
position: absolute;
content: "";
left: 50%;
margin-left: -10px;
top: 100%;
}
.div {
color: #fff;
line-height: 100px;
text-align: center;
margin: 40px;
width: 300px;
background: #e74c3c;
height: 100px;
position: relative;
display: inline-block;
}
body {
font-family: Ubuntu;
text-align: center;
background: #34495e;
color: #fff;
max-width: 800px;
margin: 0 auto;
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！