[分享]css两个制作十字架

CSS可以方便地制作出各种样式的组件，十字架也不例外。下面我们将介绍两种不同的制作十字架的方法。/第一种方法/ .cross { width: 100px; height: 100px; border...

CSS可以方便地制作出各种样式的组件，十字架也不例外。下面我们将介绍两种不同的制作十字架的方法。

/*第一种方法*/
.cross {
  width: 100px;
  height: 100px;
  border: 5px solid #000;
  position: relative;
  margin: 50px auto;
}
.cross:before, .cross:after {
  content: "";
  width: 100%;
  height: 5px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.cross:before {
  transform: rotate(45deg);
}
.cross:after {
  transform: rotate(-45deg);
} 

这个方法通过使用:before和:after伪元素来制作出十字架的两条直线，通过旋转来得到交叉的效果。同时给容器设置一个border来在四周留出空隙，让交叉部分单独呈现。

/*第二种方法*/
.cross2 {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 50px auto;
}
.cross2:before, .cross2:after {
  content: "";
  width: 5px;
  height: 100%;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.cross2:before {
  transform: rotate(45deg);
}
.cross2:after {
  transform: rotate(-45deg);
} 

第二种方法与第一种类似，不同之处在于使用竖直的线来代替了较短的斜线，同时将竖直线的位置设置为容器的中间，再借助旋转实现十字交叉的效果。