使用border制作的css三角形

最新推荐文章于 2024-09-15 22:31:42 发布

weixin_34001430

最新推荐文章于 2024-09-15 22:31:42 发布

阅读量74

点赞数

文章标签： python

原文链接：https://my.oschina.net/wbo0801/blog/758021

版权

2019独角兽企业重金招聘Python工程师标准>>>

效果输入图片说明

html结构

<div class="tool-tip-wrapper"> <div class="tool-tip"> 使用border写的三角形 <div class="tip-arrowDown-shadow"></div> <div class="tip-arrowDown"></div> </div> </div>

css代码

.tool-tip-wrapper{position: relative;left: 200px;top: 200px} .tool-tip{ position:absolute; left:-40px; top:-14px; padding:6px 12px; font-size:12px; line-height:1; text-decoration:none; text-align:center; text-shadow:0 0 1px white; white-space:nowrap; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#f9f2ba; border:1px solid #e9d315; color:#5b5316; } .tool-tip .tip-arrowDown-shadow, .tool-tip .tip-arrowDown{ position:absolute; left:90%; bottom:-12px; margin-left:-6px;

width:0;
height:0;
line-height: 0;
border-width:6px;
border-style:solid dashed dashed dashed;
border-color:#e9d315 transparent transparent transparent;

} .tool-tip .tip-arrowDown{ border-top-color:#f9f2ba; } .tool-tip .tip-arrowDown-shadow{ border-width:7px !important; bottom:-14px; margin-left:-7px; }

转载于:https://my.oschina.net/wbo0801/blog/758021