前端Wiki/CSS3/深入/现代特性

calc 与 clip-path

calc() 让 CSS 具备计算能力，可以混合不同单位运算：

width: calc(100% - 200px);：百分比减像素，做「侧栏固定、主区自适应」非常直观。
支持 + - * /，加减号两侧必须有空格（否则会被解析成负号），乘除的另一个操作数须是纯数字。
与变量组合：calc(var(--gap) * 2)，设计参数集中在变量里、计算交给 calc。

clip-path 则按路径裁剪元素的可视区域，元素还在，只是形状被剪了：

circle(50%)、ellipse()：圆形椭圆。
polygon(...)：任意多边形，坐标是百分比——三角形、箭头、六边形、斜切按钮都靠它。
配 transition 过渡 clip-path 可做形状变形动画。

两者组合的典型场景：calc 负责布局尺寸的精确控制，clip-path 负责打破矩形的呆板造型。

本节要点calc() 混合单位做四则运算，加减号两边留空格；clip-path 用 circle/polygon 裁出任意形状，polygon 坐标用百分比；一个管尺寸计算、一个管造型裁剪。

CSS

<style>
  .layout {
    display: flex;
    height: 80px;
  }
  .side { width: 120px; background: #b2ebf2; }
  /* 主区：100% 减去侧栏与间距 */
  .main {
    flex: 1;
    margin-left: 10px;
    width: calc(100% - 130px);
    background: #e1f5fe;
  }
  .tri {
    width: 80px; height: 70px;
    margin-top: 10px;
    background: #39c5cf;
    /* 三点连线裁出三角形 */
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .slant {
    display: inline-block;
    margin: 10px 0 0 10px;
    padding: 10px 24px;
    background: #7c4dff; color: #fff;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  }
</style>
<div class="layout">
  <div class="side">侧栏</div>
  <div class="main">calc 自适应</div>
</div>
<div class="tri"></div>
<span class="slant">斜切按钮</span>

🔗 相关词条transition CSS var 元素过渡

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读