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

CSS - Tooltip-arrow 绘制三角形

2015-08-10 17:41 639 查看
问题:纯CSS实现bubble的三角形部分

方法:使用border来绘制三角形;例如

.trangle {
width: 0;
border-color: transparent;
border-style: solid;
background-color: #fff;
border: 19px solid #666;
}
.trangle-up {
border-width: 0 19px 35px;
border-bottom-color: #333333;
}
.trangle-down {
border-width: 35px 19px 0;
border-top-color: #333333;
}
.trangle-left {
border-width: 19px 35px 19px 0;
border-right-color: #333333;
}
.trangle-right {
border-width: 19px 0 19px 35px;
border-left-color: #333333;
}




Demo in JSFiddle
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: