效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; height: 0px; border-width: 20px; border-style: solid; border-color: lightgreen pink yellow lightblue; } 解释:当div的宽高为0时,设border的宽度并设颜色,会发现div像是被分割为4个小三角形