CSS画各种图型(2) —— css3画TiP效果

之前的 CSS画各种图型(1) —— 纯CSS画三角型 tip效果都没会做阴影效果,每次遇到有text-shadow 效果就只能用图片了,所以本次再想办法解决一下这个问题

主要原理:

把原来的用边框效果写的三角型改成一个四边型,然后再把方向旋转一下成三角型,再把不需要的东西隐藏!这样,边框,阴影,甚至圆角都可以直接写了


css:

.tooltip{position: relative; width:180px; height:40px; padding-top: 16px; top:50px; left:50px; }
.tooltip .triangleBox{	position: absolute; top:0; left:50%; width:40px; height:17px; overflow:hidden; z-index: 99; overflow:hidden;}
.tooltip .triangleBox .triangle{ width:20px; height:20px;  margin:10px auto; border:#999 solid 1px; transform: rotate(45deg); -webkit-transform:rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg); -ms-transform: rotate(45deg);background:#fff;  box-shadow:0 0 10px #999;}
.tooltip .content{width:180px; line-height:20px; border: #999 solid 1px; background:#fff; padding:10px; border-radius: 3px; box-shadow:0 0 10px #999; cursor:pointer;}

html:

<div class="tooltip">
	<div class="content">
		<a target="_blank" href="http://www.aweb.cc">aweb.cc</a>
	</div>
	<div class="triangleBox">
		<div class="triangle"></div>
	</div>
</div>

最终效果:

tip.png

DEMO文件下载:

CSS画各种图型(2) —— css3画TiP效果



版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:CSS画各种图型(2) —— css3画TiP效果

本文地址:http://www.aweb.cc/article/detail/id/346.html

HTML5,FLASH现代文件上传组件_ <<上一篇 下一篇>>保证低版本IE不报错的使用高级插件库