你好，我这里用CSS实现了三种带边框三角，效果分别如图：
实例代码如下，根据你个人的情况调整代码吧：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Arrow</title>
</head>
<body>
<style>
/* scale */
.arrow,
.arrow:after{
position: relative
display: inline-block
width: 0
height: 0
border-top: 0
border-left: 30px dotted transparent
border-right: 30px dotted transparent
border-bottom: 30px dashed #000
}
.arrow:after {
position: absolute
top: 0
content: ''
transform: translateX(-50%) scale(.8)
border-bottom: 30px dashed #fff
}
/* width & height */
.arrow1,
.arrow1:after {
position: relative
display: inline-block
width: 0
height: 0
border-top: 0
border-left: 30px dotted transparent
border-right: 30px dotted transparent
border-bottom: 30px dashed #000
}
.arrow1:after {
position: absolute
left: -26px
top: 2px
content: ''
width: 0
height: 0
border-top: 0
border-left: 26px dotted transparent
border-right: 26px dotted transparent
border-bottom: 26px dashed #fff
}
/* border & after */
.arrow2 {
position: relative
display: inline-block
width: 28px
height: 28px
border: 0
border-top: 2px solid #000
border-right: 2px solid #000
-webkit-transform: translate(7px, 14px) rotate(-45deg)
-ms-transform: translate(7px, 14px) rotate(-45deg)
-o-transform: translate(7px, 14px) rotate(-45deg)
transform: translate(7px, 14px) rotate(-45deg)
}
.arrow2:after {
position: absolute
left: 0
top: -2px
width: 42px
height: 2px
content: ''
border-radius: 2px
background-color: #000
-webkit-transform-origin: left top
-moz-transform-origin: left top
-ms-transform-origin: left top
-o-transform-origin: left top
transform-origin: left top
-webkit-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
}
</style>
<span class="arrow"></span>
<span class="arrow1"></span>
<span class="arrow2"></span>
</body>
</html>
希望能帮到你，如有疑问请追问，望采纳~
1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
用定位做，<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.box{position:relative}
.left{position:absolutetop:0left:0}
.center{position:absolutetop:0left:}
.right{position:absolutetop:0left:0}
中间填写你第一块的宽
或者你用浮动做：
把原图放在一个<div>里，然后在这个<div>里插入一个空<span>标签，然后在css样式里，给这个span加上背景图，这个背景图就是指原图的装饰。
CSS样式如下：注意在div(本例中class命名为grd )的样式里position被设成relative(相对)而在span里position被设成absolute(绝对)；这个非常重要！而其它样式比如：width(宽度)，top(上间距) 都可以根据实际情况来定。
<style type="text/css">.grd { border:1px solid #CECECEpadding:50pxheight:50pxwidth:147pxposition:relative} .grd span{ background: url(/images/hot.gif) no-repeatdisplay: blockposition: absolutewidth: 35pxheight: 58pxtop: 5pxleft:140pxborder: 0px} </style>
有了上面的CSS，HTML可以这样写：
<div class="grd"><span></span><img src="/images/61dh.png" border="0"/></div>
