1.首先写好一个盒子,分别设置好它的上下左右边距的宽度,样式,颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ width: 100px; height: 100px; margin-left: 100px; margin-top: 100px; background-color: white; border-top: 100px solid red; border-bottom: 100px solid yellow; border-left: 100px solid orange; border-right: 100px solid green; } </style></head><body><div class="box"></div></body></html>2.把盒子的宽度和高度设置为0
width:0;height:0;3.要想产生一个向右的箭头,即把上下左的边距的颜色都设置为透明色
border-top:100px solid transparent;border-bottom:100px solid transparent;border-left:100px solid orange;border-right:100px solid transparent;