css制作钝角

在CSS中制作钝角（大于90度的角）通常可以通过以下方法实现，具体取决于设计需求和浏览器兼容性：

使用 clip-path 创建自定义形状

通过 clip-path 直接定义多边形顶点坐标，可以精确控制角度大小。例如创建一个钝角三角形：

.element {
  width: 200px;
  height: 200px;
  background: #3498db;
  clip-path: polygon(0% 0%, 100% 0%, 30% 100%);
}

调整第三个点的水平位置（如改为 20% 100%）可让夹角更钝。

结合伪元素与 transform

通过旋转伪元素生成钝角效果：

.element {
  position: relative;
  width: 200px;
  height: 100px;
  background: #e74c3c;
  overflow: hidden;
}
.element::after {
  content: '';
  position: absolute;
  right: -50px;
  top: 0;
  width: 100px;
  height: 100%;
  background: inherit;
  transform: skewX(-30deg);
}

调整 skewX 的角度值可改变钝角程度。

使用 border 技巧

通过透明边框和实色边框组合模拟钝角：

.element {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 100px solid #2ecc71;
}

减少 border-right 的宽度会使右下角变得更钝。

SVG 内联方案

直接在HTML中嵌入SVG路径：

<div class="container">
  <svg viewBox="0 0 200 100">
    <path d="M0,0 L200,0 L120,100 Z" fill="#9b59b6" />
  </svg>
</div>

修改路径的 L120,100 点为 L80,100 可增大角度。

注意事项

• clip-path 的浏览器兼容性较好，但需注意旧版本可能需要 -webkit- 前缀
• 伪元素方案适合需要内容溢出的场景
• 边框方案仅适合简单形状，无法包含内部内容
• SVG 方案具有最佳兼容性且可响应式缩放