CSS3实现空心、实心三角指示箭头（利用border的设置实现）

（一）三角形实现原理

（1）三角形的实现原理是宽高都不设置（即为0），只设置边框，如果四个边框都设置宽度（border-width）、样式（border-style）和颜色（border-color）。 （2）当四个边框的宽度形同的时候

• 效果图如下

• html结构

  边框的宽度相同

• css样式

   .box-width-equal{width: 400px;height: 400px;margin: 10px auto;position: relative;
  }
  .box-width-equal::before{content: '';position: absolute;border-left: 200px solid orange;border-top: 200px solid red;border-bottom: 200px solid orchid;border-right: 200px solid bisque;
  }
  

（3）当四个边框的宽度不相同的时候

• 效果图如下

• html结构

  边框的不宽度相同

• css样式

  .box-width-unEqual{width: 400px;height: 400px;margin: 10px auto;position: relative;
  }
  .box-width-unEqual::before{content: '';position: absolute;border-left: 250px solid orange;border-top: 120px solid red;border-bottom: 280px solid orchid;border-right: 150px solid bisque;
  }
  

（二）两个三角形重叠时，高度偏移量的实现原理

（1）原理图

（三）实心三角形（视觉上没有边框）

（1）效果图 （2）HTML结构

实心三角形（视觉上没有边框）

（3）CSS样式

* {margin: 0;padding: 0; }.dialog-noBorder {width: 300px;height: 150px;background: orchid;margin: 0 auto;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;position: relative;border: 10px solid orchid;/*此处的边框大小会影响第二个三角形到顶部的偏移量，一般是1.4倍*/ }.dialog-noBorder::before {content: '';position: absolute;top: 150px;left: 120px;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid orchid; }

（四）空心三角形（视觉上有边框）

  （1）效果图（2）HTML结构
空心三角形（视觉上有边框）

（3）CSS样式
.dialog-border {width: 300px;height: 150px;background: orchid;margin: 50px auto;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;position: relative;border: 10px solid red;/*此处的边框大小会影响第二个三角形到顶部的偏移量，一般是1.4倍*/ }.dialog-border::before {content: '';position: absolute;top: 150px;left: 120px;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid red; }.dialog-border::after {content: '';position: absolute;top: 136px;left: 120px;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid orchid; }

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！