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

（一）三角形实现原理

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

（2）当四个边框的宽度形同的时候

效果图如下
html结构
<div class="box-width-equal">边框的宽度相同</div>
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结构
<div class="box-width-unEqual">边框的不宽度相同</div>
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结构

<body>
	<div class="dialog-noBorder">实心三角形（视觉上没有边框）</div>
</body>

（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结构

<body>
	<div class="dialog-border">空心三角形（视觉上有边框）</div>
</body>

（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; }

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

（一）三角形实现原理

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

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

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

猜你喜欢