用纯css画个三角形，并且用CSS3来进行翻转

来源：互联网发布：linux system返回值编辑：程序博客网时间：2024/05/29 07:19

三角形翻转的效果，大家想必见过，这里就把相关代码贴下，大家可以应用哦，当然翻转效果暂时不支持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>