css3画组织架构图

CSS3是前端开发中不可缺少的技术之一，它不仅可以实现页面的美化，还能实现一些复杂的布局操作。今天我们来讲一下如何使用CSS3来画组织架构图。

.team {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.team::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 2px);
  width: 4px;
  height: 100%;
  background-color: #ccc;
}

.team .member {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team .member::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #ccc;
  transform: translateY(-50%);
}

.team .member:last-child::before {
  display: none;
}

.team .member h3 {
  margin: 20px 0 0 0;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.team .member p {
  margin: 10px 0 0 0;
  font-size: 14px;
  color: #aaa;
  text-align: center;
}

css3画组织架构图

首先，我们需要给整个组织结构图的容器添加一个class名为“team”。接着，我们使用CSS3的flex布局来实现容器内部元素居中对齐。接下来，我们给“team”容器添加一个伪元素，并设置它为绝对定位。它的宽度为4像素，高度为100%（即整个容器的高度），并设置背景颜色为灰色，以模拟整个组织结构图的竖线。

接下来，我们给每一个成员块元素添加一个class名为“member”。并使用flex布局，让成员块元素的内容垂直居中对齐。我们还给每一个成员块元素添加一个伪元素，并设置它为绝对定位。它的右侧距离成员块元素的左侧为10像素，并且设置一个border属性，让它们组成一个等腰直角三角形，以表示成员之间的层次关系。

最后，我们给每一个成员块元素的标题和描述添加相应的样式，并且为最后一个成员块元素的伪元素设置display属性为none，以完成整个组织结构图的绘制。

相关推荐