CSS3实现空心、实心三角指示箭头（利用正方形的旋转实现）

（一）两个正方形重叠时，高度偏移量的实现原理

请参考：两个三角形重叠时，高度偏移量的实现原理 点击打开链接

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

（1）HTML结构

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

（2）CSS样式

.dialog-rotate-noBorder {
  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 orchid; }

.dialog-rotate-noBorder::before {
  content: '';
  position: absolute;
  top: 145px;
  left: 120px;
  width: 30px;
  height: 30px;
  background: orchid;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg); }

（3）效果图

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

（1）HTML结构

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

（2）CSS样式

.dialog-rotate-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; }

.dialog-rotate-border::before {
  content: '';
  position: absolute;
  top: 145px;
  left: 120px;
  width: 30px;
  height: 30px;
  background: red;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg); }

.dialog-rotate-border::after {
  content: '';
  position: absolute;
  top: 131px;
  left: 120px;
  width: 30px;
  height: 30px;
  background: orchid;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg); }

（3）效果图