三角形翻转的效果,大家想必见过,这里就把相关代码贴下,大家可以应用哦,当然翻转效果暂时不支持IE 6 7 8。
1、纯CSS做个三角
代码如下: <style type="text/css"> .rightdirection { width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color:transparent transparent transparent #A9DBF6; } .bottomdirection { width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color: #A9DBF6 transparent transparent transparent; } .leftdirection { width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color: transparent #A9DBF6 transparent transparent; } .topdirection { width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color: transparent transparent #A9DBF6 transparent; } </style> <div class="rightdirection"></div> <p> <div class="bottomdirection"></div> <p> <div class="leftdirection"></div> <p> <div class="topdirection"></div>
2.翻转:实现翻转
<!DOCTYPE html> <html> <head> <style>
.jt b { border-color: #FFD0C0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: solid dashed dashed; border-width: 10px; font-size: 0; height: 0; line-height: 0; position: absolute; left: 150px; top: 14px; width: 0; } .jt:hover b { border-color: #ccc rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); transform: rotate(180deg); transform-origin: 50% 30% 0; transition: transform 0.2s ease-in 0s; -moz-transform: rotate(180deg); -moz-transform-origin: 50% 30% 0; -moz-transition: transform 0.2s ease-in 0s; }
</style> </head> <body>
<div class="jt"> <b>你好啊</b> </div>
</body> </html>
|