如何用CSS3绘制带圆角的特殊直角三角形？

下面给你几种实用的方法，能帮你做出普通三角形之外的特殊形状：

1. 伪元素拼接法 #

用元素的:before或:after伪元素，把多个基础形状拼起来。比如要做一个带缺口的三角形，主元素画大三角形，伪元素用背景色“挖”掉一块：

#shape {
  position: relative;
  width: 0;
  height: 0;
  border-left: 72px solid transparent;
  border-bottom: 72px solid red;
}
#shape:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  /* 用白色背景模拟切角，换成页面背景色即可 */
  border-top: 24px solid transparent;
  border-left: 24px solid #fff;
}

2. clip-path路径裁剪 #

用clip-path直接定义多边形路径，精准裁剪出你要的形状，灵活度很高：

#shape {
  width: 72px;
  height: 72px;
  background-color: red;
  /* 坐标点依次是：左上角、右下角、左下角，可自行调整 */
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

你只需要修改polygon里的(x,y)坐标，就能画出任意多边形形状，坐标以元素左上角为原点。

3. 多重边框组合 #

调整元素四个边框的宽度和颜色，配合transform旋转，能做出不少不对称的特殊三角形：

#shape {
  width: 0;
  height: 0;
  border-top: 36px solid transparent;
  border-left: 72px solid red;
  border-bottom: 36px solid transparent;
  border-right: 18px solid transparent;
  /* 可选：旋转调整角度 */
  transform: rotate(15deg);
}

4. 内嵌SVG（复杂形状首选） #

如果形状特别复杂，直接内嵌SVG是最靠谱的，还能配合CSS改样式：

<svg width="72" height="72" viewBox="0 0 72 72">
  <!-- d属性里的路径可根据你的目标形状修改 -->
  <path d="M0,0 L60,72 L0,72 Z" fill="red" />
</svg>

内容的提问来源于stack exchange，提问作者Dao Loc