css3画各种图形—代码示例

温馨提示：这篇文章已超过289天没有更新，请注意相关的内容是否还可用！

CSS3是一种用于网页设计的样式表语言，它提供了丰富的功能和效果，其中之一就是可以用来绘制各种图形。我将向大家介绍如何使用CSS3来画各种图形，并提供相应的代码示例。

我们来讨论如何使用CSS3画一个矩形。通过设置元素的宽度和高度属性，我们可以定义矩形的大小。通过设置元素的背景颜色属性，我们可以为矩形添加颜色。下面是一个简单的示例代码：


.rectangle {
  width: 200px;
  height: 100px;
  background-color: blue;
}

接下来，我们来讨论如何使用CSS3画一个圆形。通过设置元素的宽度和高度相等，并将边框的圆角半径设置为50%，我们可以创建一个圆形。通过设置元素的背景颜色属性，我们可以为圆形添加颜色。下面是一个简单的示例代码：


.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}

除了矩形和圆形，我们还可以使用CSS3画其他形状，比如三角形。通过设置元素的宽度和高度为0，并设置边框的宽度和颜色，我们可以创建一个三角形。通过设置元素的边框样式为solid和transparent，我们可以去除三角形的一侧边框，从而形成一个只有三个边的形状。下面是一个简单的示例代码：


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

除了基本的形状，我们还可以使用CSS3画更复杂的图形，比如五角星。通过设置元素的宽度和高度为0，并设置边框的宽度和颜色，我们可以创建一个五角星。通过设置元素的边框样式为solid和transparent，我们可以去除五角星的一侧边框，从而形成一个只有五个边的形状。下面是一个简单的示例代码：


.star {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid yellow;
  position: relative;
  transform: rotate(35deg);
}
.star:before {
  content: "";
  position: absolute;
  top: -65px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid yellow;
  transform: rotate(-70deg);
}