利用CSS3创建炫酷的三角背景图像-猿码集

1. 前言

在网页设计中，背景图像扮演着非常重要的角色。而在其中，三角背景图像更是可以起到很好的装饰作用。利用CSS3，我们可以很容易地创建出炫酷的三角背景图像。本文将会带领大家详细了解如何使用CSS3创建炫酷的三角背景图像。

2. 制作三角形的基本方法

要在网页中创建三角形，我们可以利用CSS3中的border属性和transparent属性。下面是一个简单的例子：


.triangle {
   border: 100px solid transparent;
   border-top: 100px solid red;
}

上述代码可以创建一个高为100px，底边长为100px的红色三角形。

我们可以通过控制border的大小和颜色来实现不同形状的三角形。同时也可以修改border-radius属性达到圆角效果。

2.1 向上的三角形


.triangle-up {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid red;
}

上述代码可以创建一个宽100px，高100px的红色向上的三角形。

2.2 向下的三角形


.triangle-down {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-top: 100px solid red;
}

上述代码可以创建一个宽100px，高100px的红色向下的三角形。

2.3 向左的三角形


.triangle-left {
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-right: 100px solid red;
   border-bottom: 50px solid transparent;
}

上述代码可以创建一个宽100px，高100px的红色向左的三角形。

2.4 向右的三角形


.triangle-right {
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-left: 100px solid red;
   border-bottom: 50px solid transparent;
}

上述代码可以创建一个宽100px，高100px的红色向右的三角形。

3. 创建多边形图像

通过CSS3，我们不仅可以创建三角形图像，还可以创建各种多边形图像。下面我们通过一个例子详细讲解如何使用CSS3创建多边形图像。我们将创建一个八角星的背景图像。八角星可以分为两个正方形，再加上四个等腰梯形，下图所示：

首先，我们通过两个正方形和四个等腰梯形拼接成八角星。


.octagon {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: red;
}
.octagon:before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background-color: white;
  transform: rotate(45deg);
}
.octagon:after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 80px; height: 80px;
  background-color: white;
  transform: rotate(45deg);
}
.octagon .trapezoid {
  height: 80px;
  background-color: white;
  position: absolute;
  width: 130px;
  transform: rotate(45deg);
}
.octagon .trapezoid.top-left {
  top: -45px;
  left: 5px;
  border-bottom: 20px solid white;
  border-left: 65px solid transparent;
  border-right: 65px solid transparent;
}
.octagon .trapezoid.bottom-left {
  bottom: -45px;
  left: 5px;
  border-top: 20px solid white;
  border-left: 65px solid transparent;
  border-right: 65px solid transparent;
}
.octagon .trapezoid.top-right {
  top: -45px;
  right: 5px;
  border-bottom: 20px solid white;
  border-left: 65px solid transparent;
  border-right: 65px solid transparent;
}
.octagon .trapezoid.bottom-right {
  bottom: -45px;
  right: 5px;
  border-top: 20px solid white;
  border-left: 65px solid transparent;
  border-right: 65px solid transparent;
}

上述代码可以创建一个300x300的红色正方形，通过:before和:after伪元素制作两个白色正方形，再通过四个等腰梯形拼接而成，最终形成运行初始样式下面图形：

4. 创建三角形背景图像

我们可以使用之前所述方法中的三角形来创建三角形背景图像。下面展示如何将多个三角背景拼接成一个背景图像。

4.1 单一三角形背景


.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 100px;
  border-color: transparent transparent blue transparent;
}

上述代码可以创建出一个带有蓝色底色的等腰三角形，如下所示：

4.2 多个三角形拼接成图案

我们可以将多个三角形拼接成需要的图形。

下面是一个由多个向左的三角形组成的三角形背景图案：


.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid blue;
  border-bottom: 50px solid transparent;
  float: left;
}
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 100px;
  border-color: blue transparent transparent transparent;
  float: left;
}

上述代码演示了如何使用向左的三角形和竖直的三角形来创建三角形背景图案。

5. 利用渐变与阴影创建炫酷背景图案

在之前的例子中，我们创建的背景图像单调而简单。在实际应用中，我们需要更加丰富多彩的图案来展现图像。在CSS3中，我们也可以使用渐变和阴影来创建炫酷的背景图案。

5.1 渐变背景图案

下面是一个创建从左到右渐变背景图案的代码：


.gradient-background {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, #f00, #0f0, #00f);
}

上述代码从左到右创建了一个红-绿-蓝的渐变背景图案。

5.2 阴影背景图案

下面是一个创建阴影背景图案的代码：


.shadow-background {
    width: 400px;
    height: 400px;
    background-color: #fff;
    box-shadow: 0px 0px 50px 50px blue inset;
}

上述代码创建了一个带有蓝色阴影效果的背景图案。

5.3 组合使用多个渐变和阴影

下面是一个将多个渐变和阴影组合到一起创建出的背景图案：


.mixed-background {
    width: 400px;
    height: 400px;
    background-image: radial-gradient(ellipse at bottom, #f00, #00f), linear-gradient(to right, #0f0, #00f), linear-gradient(to bottom right, #ff0, #f00), radial-gradient(ellipse at top, #00f, #0f0);
    box-shadow: 0px 0px 50px 50px blue inset;
}

上述代码创建了一个多彩的背景图案。在这个背景图案中，我们混合使用了多个渐变和阴影效果。

6. 总结

在本文中，我们介绍了如何使用CSS3来创建炫酷的三角背景图像。我们可以通过border属性、伪元素、阴影和渐变来实现不同形状和颜色的背景图案。通过多次使用这些技术，我们可以创建出更加复杂和炫酷的背景图案。

利用CSS3创建炫酷的三角背景图像