200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > css的after右箭头 CSS3 使用:after伪元素实现的带指示箭头信息提示框

css的after右箭头 CSS3 使用:after伪元素实现的带指示箭头信息提示框

时间:2023-10-10 13:20:39

相关推荐

css的after右箭头 CSS3 使用:after伪元素实现的带指示箭头信息提示框

CSS

语言:

CSSSCSS

确定

@import url(/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;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。