效果图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>翻转方向样式</title>
<style type="text/css">
.arrow-lt
{
-webkit-transform: rotate(-45deg);
margin-right: 3px;
}
.arrow-lt, .arrow-rt
{
display: inline-block;
font-size: 0;
border-top: 3px solid #BAB5AD;
border-left: 3px solid #BAB5AD;
width: 6px;
height: 6px;
background-color: rgba(0, 0, 0, 0);
}
.arrow_frame
{
width: 15px;
height: 100px;
border: solid 2px #CECECE;
border-radius: 4px;
}
.arrow_center
{
border-color: transparent transparent transparent #CECECE;
border-width: 9px;
border-style: dashed solid dashed dashed;
width: 0px;
height: 0px;
margin-top: 40px;
margin-left: 3px;
}
</style>
</head>
<body>
<h2>
样式1</h2>
<div class="arrow_frame">
<div class="arrow_center">
</div>
</div>
<h2>
样式2</h2>
<span class="arrow-lt">123</span>
</body>
</html>