将定向边添加到基于CSS的图形可视化器 [英] Adding directed edges to a CSS-based graph visualizer

问题描述

查看此基于CSS的图形可视化。任何想法是什么是最简单的方法添加到边缘的方向（例如边缘上的箭头）？

See this CSS-based visualization for graphs. Any idea what is the easiest way to add directions to edges (e.g. arrows on edges)?

推荐答案

包含< li> c>< span> 标签并对伪元素进行样式化，以获得正确的结果。您不能使用ASCII字符，背景或纯CSS三角形。

Wrap your <li> contents with <span> tags and style the pseudo elements to achieve a proper result. You may not use ASCII characters, backgounds or even pure CSS triangles.

http://jsfiddle.net/ndozdw00/1/

.tree li span:after{
  content: "▼";
  position: absolute;
  left: 50%;
  width: 10px;
  margin-left: -5px;
  top: 10px;
  z-index: 100;
}

这篇关于将定向边添加到基于CSS的图形可视化器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！