直接用css属性值设置边线：border即可，还可以单独设置border-left，right，bottom，top。
用ccs3中的盒阴影设置，是一种固定写法： box-shadow：1px 1px red,inset 1px 1px red.
你试试用背景渐变和边框以及2d旋转来试试三角
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>带边线的三角</title>
<style>
*{padding:0margin: 0}
.box{
width: 400px
height: 400px
background: pink
margin: 200px
}
.arrow{
width: 30px
height: 30px
box-sizing: border-box
overflow: hidden
border-width: 1px 1px 0 0
border-color: #000
border-style: solid
background: linear-gradient(225deg,#f00 50%, transparent 50%)
transform: rotate(45deg)
}
</style>
</head>
<body>
<div class="box">
<div class="arrow"></div>
</div>
</body>
</html>
