css 正方型折叠一个角

要实现一个正方形折叠一个角的效果，可以使用 CSS 的 transform 和伪类 :before 或 :after 来实现。下面是一个示例代码：

HTML：

<div class="square"></div>

CSS：

.square {
  width: 200px;
  height: 200px;
  background-color: #000;
  position: relative;
}

.square:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 100px solid #000;
  border-left: 100px solid transparent;
  transform-origin: top right;
  transform: rotate(45deg);
}

在上面的代码中，我们创建了一个 div 元素，并为其设置了宽度和高度为 200px，并给它一个黑色的背景色。然后，我们使用伪类 :before 创建一个三角形，并通过设置边框的宽度和颜色来控制其形状和颜色。通过调整伪类的位置和旋转角度，我们可以实现正方形折叠一个角的效果。

请注意，上述代码只是一种实现方式，你可以根据具体需求进行调整和修改。

相关问题

css 四边形倾斜一个角

要在CSS中倾斜一个角，可以使用transform属性的skew()函数。skew()函数用于沿着X轴和Y轴倾斜元素。您可以通过设置skewX()或skewY()来单独倾斜某个角度，也可以使用skew()函数同时倾斜X轴和Y轴。

下面是一个示例代码，演示如何倾斜一个四边形的一个角：

.quad {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transform: skew(30deg);
}

在这个例子中，我们使用了一个名为`.quad`的类来应用倾斜效果。倾斜角度通过`skew()`函数的参数进行设置，这里设置为30度。您可以根据需要调整角度值。

css画一个五角星

可以使用CSS伪元素来绘制五角星。以下是一种方法：

.star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #f1c40f;
  border-left: 20px solid transparent;
  transform: rotate(35deg);
}

.star::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -20px;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #f1c40f;
  border-left: 20px solid transparent;
  transform: rotate(-70deg);
}

.star::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #f1c40f;
  border-left: 20px solid transparent;
  transform: rotate(70deg);
}

这个CSS代码将创建一个黄色的五角星。.star类设置了一个相对定位，并使用border属性创建三角形，然后使用transform属性旋转它们。伪元素::before和::after分别创建两个倾斜的三角形，共同组成五角星的形状。您可以通过更改border的大小和颜色来自定义五角星的外观。