[分享]CSS3教程画画简单

如果你希望在网站上添加自己的图形或者图像，那么CSS3就是你需要掌握的技巧之一。CSS3允许你使用各种颜色、阴影和渐变来创建视觉效果。下面让我们看一下如何使用CSS3画一个简单的图案：.box { w...

如果你希望在网站上添加自己的图形或者图像，那么CSS3就是你需要掌握的技巧之一。CSS3允许你使用各种颜色、阴影和渐变来创建视觉效果。下面让我们看一下如何使用CSS3画一个简单的图案：

.box {
  width: 100px;
  height: 100px;
  background-color: #333;
}
.box::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent #f00 transparent;
  position: relative;
  top: -50px;
  left: -50px;
}

.box::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent #fff transparent;
  position: relative;
  top: -100px;
  left: -100px;
} 

上面的代码将创建一个带有阴影的红色与白色三角形。通过添加一个几何图形作为容器的伪元素，我们可以用纯CSS3实现我们所需要的元素。CSS3为我们提供了一张不需要使用图像的丰富调色板和像素混合，这使得它很可能是产生独特视觉效果的最佳选择。