如下所示的代码
<body>
<div class="c-main"></div>
</body>
css中给c-main添加宽度和高度方便观察箭头
.c-main{ position: relative; //必须要写! width: 400px; height: 400px; border: 1px solid #000; }
/使用伪类制作箭头/
.c-main:before{ content: ""; border-top: 9px solid transparent;/方框上部分背景颜色为透明/ border-bottom: 9px solid transparent;/方框下部分背景为透明/ border-right: 9px solid #000;/箭头背景颜色/ position: absolute;/绝对定位1/ top: 25px;/距离顶部位置偏移量2/ left: -9px;/距离左边位置偏移量3/ /123都是控制显示位置的/ }
.c-main:after{ content: ""; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid #fff;/箭头背景颜色，覆盖前面的#eee颜色，使其颜色与整体颜色一致/ position: absolute; top: 27px; left: -7px;//这里的top:27px，left:-7px是为了遮盖住.c-main:before生成的箭头，使箭头边框呈现颜色 }
效果如下：
