代码如下：
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) /*将小三角旋转到你想要的角度*/
}
你可以根据自己的需要进行微调
DIV里没有和PS一样的斜切。可以先把矩形CTRL+Q转曲。然后按F10对每个节点进行调整。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
设置矩形边框 ：border : 1px solid #000000添加文字：
<ul>
<li>九寨沟</li>
<li>黄山风景区</li>
。。。。。
。。。。。
。。。。。
</ul>
根据实际写N对li即可
希望可以帮到你～
