[分享]css3怎么画出1234

CSS3是一种用于网页排版与设计的编程语言，今天我们来学习如何使用CSS3画出数字1、2、3、4。

/* 数字1 */
.one {
  width: 20px;
  height: 100px;
  background-color: #000;
  position: relative;
  margin: 50px auto;
}

.one::before {
  content: ';
  position: absolute;
  width: 60px;
  height: 20px;
  background-color: #000;
  top: -50px;
  left: -20px;
  transform: rotate(-45deg);
}

/* 数字2 */
.two {
  width: 100px;
  height: 140px;
  position: relative;
  margin: 50px auto;
}

.two::before, .two::after {
  content: ';
  position: absolute;
  width: 60px;
  height: 20px;
  background-color: #000;
  top: 0;
}

.two::before {
  transform: rotate(-45deg);
  left: 0;
}

.two::after {
  transform: rotate(45deg);
  right: 0;
  top: 120px;
}

/* 数字3 */
.three {
  width: 100px;
  height: 140px;
  position: relative;
  margin: 50px auto;
}

.three::before, .three::after {
  content: ';
  position: absolute;
  width: 60px;
  height: 20px;
  background-color: #000;
  top: 20px;
}

.three::before {
  transform: rotate(-45deg);
  left: 0;
}

.three::after {
  transform: rotate(45deg);
  right: 0;
  top: 100px;
}

/* 数字4 */
.four {
  width: 100px;
  height: 140px;
  position: relative;
  margin: 50px auto;
}

.four::before {
  content: ';
  position: absolute;
  width: 20px;
  height: 140px;
  background-color: #000;
  left: 40px;
}

.four::after {
  content: ';
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: #000;
  top: 60px;
} 

以上是用CSS3画出数字1、2、3、4的代码，通过增加数字，可以轻松绘制出更多数字。CSS3使得网页排版与设计更加丰富多彩，希望大家可以多多尝试，开发出更加优美独特的网页。