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