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;

}