css制作尖角

使用边框制作三角形

通过设置元素的宽度和高度为0，利用边框的透明属性可以制作三角形。例如制作一个向上的三角形：

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

使用伪元素制作尖角

通过伪元素结合旋转变换可以制作各种角度的尖角。例如制作一个45度的尖角：

.arrow {
  position: relative;
  width: 100px;
  height: 100px;
  background: #3498db;
}
.arrow:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 20px;
  height: 20px;
  background: #3498db;
}

使用clip-path创建多边形

clip-path属性可以直接创建各种多边形形状，包括尖角：

.polygon {
  width: 100px;
  height: 100px;
  background-color: #ff5722;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

SVG实现尖角效果

使用SVG可以创建更复杂的尖角形状，并保持矢量特性：

<svg width="100" height="100">
  <polygon points="50,0 0,100 100,100" fill="#9c27b0" />
</svg>

使用linear-gradient渐变

通过CSS渐变可以模拟尖角效果：

.gradient-arrow {
  width: 100px;
  height: 100px;
  background: linear-gradient(to bottom right, #fff 50%, transparent 50%);
}

这些方法可以根据具体需求选择使用，边框法适合简单三角形，伪元素法适合结合其他元素使用，clip-path和SVG适合更复杂的形状，渐变法则适合特殊的视觉效果。