图：

HTML代码：

<div class="pre-wrap">      <div class="pre">          <div class="pre1"></div>          <div class="pre2"></div>      </div>  </div>  

 

CSS代码：

.pre-wrap {   width: 200px;   height: 120px;   margin: 50px auto 0;   border: 2px solid #F00;   border-radius: 4px;   position: relative;  }  .pre {   width: 80px;   height: 80px;   position: absolute;   top: 20px;   left: 40px;  }  .pre1 {   border-width: 40px;   border-color: transparent #F30 transparent transparent;  }  .pre2 {   border-width: 40px;   border-color: transparent #FFF transparent transparent;   position: relative;   top: -80px;   left: 15px;  }  .pre1, .pre2 {   /*****设置border-style:dashed;使ie6支持border透明*****/   border-style: dashed solid dashed dashed;      /*****设置容器宽高为0*****/   width: 0;   height: 0;   /*****去掉ie6下默认高度，设置以下属性*****/   line-height: 0;   font-size: 0;   overflow: hidden;    }