width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red}
代码如下：
html:
<div id="div3">
<div class="arrow-top"></div>
</div>
css:
#div3 {
position: relative
width: 300px
height: 200px
background-color: yellow
}
.arrow-top {
position: absolute
top: -50px
left: -50px /*移动距离为小三角的宽高*/
width: 0px
height: 0px
border-width: 50px /*小三角的高度*/
border-style: solid
border-color: transparent transparent #C73837 transparent /*朝上的小三角*/
transform: rotate(-45deg) /*将小三角旋转到你想要的角度*/
}
你可以根据自己的需要进行微调
<divstyle=“height:300pxwidth:200pxborder:solide
1px
blue”></div>
关键是你的div要有一定的宽高。另外边框的颜色不要和背景色一样，这样也会看不出来
