.tri_top, .tri_right, .tri_bottom, .tri_left{
width: 150px;
height: 100px;
background: #CCCCCC;
border-radius: 8px;
margin: 50px 50px;
position: relative;
float: left;
}
.tri_top:before{
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #CCCCCC;
position: absolute;
top: -10px;
left: 65px;
}
.tri_right:before{
content: "";
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #CCCCCC;
position: absolute;
top: 40px;
left: 150px;
}
.tri_bottom:before{
content: "";
width: 0px;
height: 0px;
border-top: 10px solid #CCCCCC;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: 100px;
left: 70px;
}
.tri_left:before{
content: "";
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #CCCCCC;
position: absolute;
top: 40px;
left: -10px;
}
css实现tips不同方向浮框小三角
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 项目中需要一些三角形图标,UI切图也比较麻烦,这时候可以自己用代码写出不同的效果 设置三角形的原理 如果我们想让箭...
- 这次的分享主要用到圆角、边框、定位等知识点(鉴于IE9以上才支持圆角,暂时不考虑兼容问题) 先做一些通用的基础设置...
- 做前端的小伙伴经常会在项目中遇到需要实现三角形或者带三角形对话框的地方,很多的实现方法是将三角形小图标给切成图片,...
- 目标 用css的方式实现如下图样式的提示框 解决方案 考虑以多个部件组装的方式实现。分为矩形提示框和边上的小三角形...