Tip中的指示箭头实现1

为什么80%的码农都做不了架构师？>>>   

html:

<div class="tips">
	<div class="tips-text">
		Lorem ipsum dolor sit amet.
	</div>
	<div class="tips-top diamond"></div>
    <div class="tips-bottom diamond"></div>
    <div class="tips-left diamond"></div>
    <div class="tips-right diamond"></div>
</div>

CSS:

<style>
    	html,body{padding:0;margin:0;}
    	body{padding:20px;font:16px/1.5 Georgia;}

    	.diamond{
    	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
    	filter: progid:DXImageTransform.Microsoft.Matrix(
    		M11=0.7071067811865475,
    		M12=-0.7071067811865477,
    		M21=0.7071067811865477,
    		M22=0.7071067811865475,
    		SizingMethod='auto expand'
    	);
    	-moz-transform: rotate(45deg);
    	-o-transform: rotate(45deg);
    	-webkit-transform: rotate(45deg);
    	-ms-transform: rotate(45deg);
    	transform:rotate(45deg);


    	}
    	:root .diamond{filter:none\9;}/*ie9 hack*/

    	.tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
    	.tips-top{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-top:1px solid #ffba00;top:-5px;top:-6px\9;_top:-7px;left:10px;}
        .tips-bottom{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-right:1px solid #ffba00;border-bottom:1px solid #ffba00;bottom:-5px;bottom:-6px\9;_bottom:-7px;left:10px;}
        .tips-left{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-bottom:1px solid #ffba00;left:-5px;left:-6px\9;_left:-7px;top:10px;}
        .tips-right{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-right:1px solid #ffba00;border-top:1px solid #ffba00;right:-5px;right:-6px\9;_right:-7px;top:10px;}
    	</style>

效果：

DEMO：

http://www.css88.com/demo/tipbox/index1.html

 

转载于:https://my.oschina.net/jsan/blog/56871