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 方案具有最佳兼容性且可响应式缩放
