边框三角和饼图揭秘

前端

2023-12-06 09:36:22

CSS 三角形

CSS三角形是一种使用CSS创建的几何图形。它可以用来创建各种形状的三角形，包括等边三角形、等腰三角形和任意三角形。

要创建CSS三角形，我们需要使用border属性。border属性可以用来设置元素的边框样式、颜色和宽度。

我们还可以使用transparent透明色来隐藏边框。这可以使我们创建出没有边框的三角形。

CSS 饼图

CSS饼图是一种使用CSS创建的图形，用来表示数据之间的比例关系。饼图通常由一个圆形组成，圆形被划分为不同的扇形，每个扇形的面积代表其所表示的数据的比例。

要创建CSS饼图，我们需要使用border-radius属性。border-radius属性可以用来设置元素的边框圆角。

我们还可以使用transform属性来旋转元素。这可以使我们创建出倾斜的饼图。

示例代码

以下是一些创建CSS三角形和饼图的示例代码：

/* 创建一个等边三角形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 200px solid red;
}

/* 创建一个等腰三角形 */
.triangle-isosceles {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}

/* 创建一个任意三角形 */
.triangle-arbitrary {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 125px solid green;
}

/* 创建一个饼图 */
.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
}

.pie-chart-slice1 {
  width: 50%;
  height: 50%;
  background-color: #f00;
  transform: rotate(45deg);
}

.pie-chart-slice2 {
  width: 50%;
  height: 50%;
  background-color: #0f0;
  transform: rotate(135deg);
}