[分享]css3十字div

CSS3十字div是一种非常常见且实用的CSS技巧。它可以将一个div元素分割成四个区块，从而实现类似于十字形的效果。十字div可以用于各种排版，如网站的导航栏、图片展示、弹出窗口等。.crossdi...

CSS3十字div是一种非常常见且实用的CSS技巧。它可以将一个div元素分割成四个区块，从而实现类似于十字形的效果。十字div可以用于各种排版，如网站的导航栏、图片展示、弹出窗口等。

.cross-div {
  position: relative;
  width: 200px;
  height: 200px;
}

.cross-div:before, .cross-div:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
}

.cross-div:before {
  transform: rotate(90deg);
}

.cross-div:after {
  transform: rotate(-90deg);
} 

以上代码实现的效果是在一个div中创建了两个伪元素，通过设置宽度、高度、位置以及背景颜色来实现，然后通过transform属性的旋转来将其中一条线水平变为垂直的线，另一条线则由垂直变为水平。最后这两条线通过CSS居中（top:50%），实现了交叉的效果。如果在上述代码中增加一些样式，还可以实现更多效果，例如加入淡入动画、将十字div分成更多区块等。