📜  用箭头连接两个 div - 任何代码示例

📅  最后修改于: 2022-03-11 14:57:48.262000             🧑  作者: Mango

代码示例1
ul {
  display: flex;
  list-style: none;
}
li {
  padding: 10px 25px;
  border: 1px solid black;
  margin: 0 25px;
  position: relative;
}
li:not(:last-child):after {
  content: '';
  height: 1px;
  background: black;
  width: 50px;
  position: absolute;
  right: -50px;
  top: 50%;
}
li:not(:last-child):before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  right: -50px;
  transform: translateY(-50%);
}