CSS 绘制三角形、扇形;

78 阅读1分钟

在CSS中,你可以使用多种方法来实现三角形。以下是几种常用的方法和相应的代码示例:

  1. 使用边框:
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

这个方法通过设置元素的边框来创建三角形,其中左右边框设为透明,底边框设置为你想要的颜色。

  1. 使用伪元素:
.triangle {
  position: relative;
  width: 100px;
  height: 100px;
}

.triangle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-width: 0 100px 100px 0;
  border-style: solid;
  border-color: red;
}

这个方法使用伪元素 ::before 来创建三角形,通过设置其边框的宽度和样式来实现。

  1. 使用旋转:
.triangle {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

这个方法创建一个正方形元素,然后通过使用 transform 属性的 rotate 函数将其旋转45度,从而形成一个三角形。

使用css来实现扇形。代码示例:

div{
    border:100px solid transparent;
    width:0;
    height:0;
    border-radius:100px;
    border-top-color:red;
}

这样就会简单的实现扇形啦!