如何开发网页斜角形状盒子？参考MKBHD官网样式

要做出你提到的这类斜角盒子，有几种简单易上手的CSS实现方式，下面逐一拆解：

方案1：使用CSS clip-path（最简便） #

clip-path可以直接裁剪元素形状，代码简洁，效果精准。

HTML结构：

<div class="slanted-box">
  <h3>工作室频道</h3>
  <p>这里放置你的内容</p>
</div>

CSS样式：

.slanted-box {
  background: #222;
  color: #fff;
  padding: 2rem;
  /* 左上角、右上角、右下角（斜切）、左下角，数值可调角度 */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

调整polygon()里第三个坐标的Y值（比如把85%改成70%），就能改变斜角的倾斜程度，数值越小斜角越陡。

方案2：transform + 伪元素（兼容旧浏览器） #

如果需要适配不支持clip-path的旧浏览器，可以用伪元素做倾斜背景，内容层保持正常不倾斜。

HTML结构同上，CSS样式：

.slanted-box {
  position: relative;
  color: #fff;
  padding: 2rem;
  z-index: 1;
}

.slanted-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #222;
  transform: skewY(-3deg); /* 负数是右下斜，正数是右上斜，数值调角度 */
  transform-origin: top left;
  z-index: -1;
}

方案3：SVG背景（复杂形状适配） #

如果需要更复杂的斜角或自定义曲线，用SVG做背景图是最佳选择，缩放不会失真。

CSS样式：

.slanted-box {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,85 L0,100 Z" fill="%23222"/></svg>');
  background-size: cover;
  color: #fff;
  padding: 2rem;
}

修改SVG里path的坐标值，就能自定义斜角的形状和角度，fill属性用来设置背景色。

内容的提问来源于stack exchange，提问作者Diego Manzanares