HTML & CSS - 如何绘制流向箭头答案

【问题标题】：HTML & CSS - how to draw flow arrowsHTML & CSS - 如何绘制流向箭头
【发布时间】：2018-04-12 07:12:23
【问题描述】：

请找到附图，有一个流向箭头，它是第一个字段到第二个标记为红色，任何人都可以帮助我，我如何使用纯 css 来实现它

【问题讨论】：

这很有趣，我们需要一些代码提供minimal reproducible example，拜托。

标签： html css

【解决方案1】：

你可以使用这样的东西： example1 example2

body{
  font-size: 25px; /* Change font and  see the magic! */
  color: #f07;     /* Change color and see the magic! */
} 

/* RESPONSIVE ARROWS */
[class^=arr-]{
  border:       solid currentColor;
  border-width: 0 .2em .2em 0;
  display:      inline-block;
  padding:      .20em;
}
.arr-right {transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);}
.arr-left  {transform:rotate(135deg);  -webkit-transform:rotate(135deg);}
.arr-up    {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.arr-down  {transform:rotate(45deg);   -webkit-transform:rotate(45deg);}

This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down

【讨论】：