一、效果图

 

　　京东效果

 

　　模拟的效果

 

　　二、原理

 

　　准备一个高度和宽度为0的盒子

 

　　将这个盒子设置一个边框

 

　　将边框不需要的地方用 transparent 来代替，需要显示的地方设置对应的颜色

 

　　如果需要改变其大小，直接设置边框的宽度 border-width

 

　　将字体 font-size 和行高 line-height 设置为0，以免影响显示

 

　　最后使用定位将其设置到需要的位置

 

　　三、代码

 

　　HTML结构

 

　　<div class="square">

 

　　<p class="triangle"></p>

 

　　</div>

 

　　CSS样式

 

　　.square {

 

　　position: relative;

 

　　width: 400px;

 

　　height: 200px;

 

　　background: green;

 

　　margin: 150px auto;

 

　　}

 

　　.triangle {

 

　　position: absolute;

 

　　top: -40px;

 

　　left: 50%;

 

　　margin-left: -20px;

 

　　width: 0;

 

　　height: 0;

 

　　border-style: solid;

 

　　border-width: 20px;

 

　　border-color: transparent transparent red transparent;

 

　　font-size: 0;

 

　　line-height: 0;

 

　　}