如何用CSS制作内容楔形？求助：网站用Div+CSS制作特定形状遇难题

嘿，我来帮你搞定这个楔形的制作！其实用CSS实现这类形状有几种靠谱的方案，我给你拆解几个实用的方法，你可以根据自己的需求来选：

这是最经典的实现方式，靠CSS边框的梯形特性来做，适合快速做出实心或空心的简单楔形。比如要做一个向右的实心楔形：

.wedge {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #2c3e50; /* 这里调整颜色和楔形的宽度 */
}

要是需要空心的边框楔形，只需要加个伪元素做内层反向边框就行：

.hollow-wedge {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #2c3e50;
  position: relative;
}
.hollow-wedge::after {
  content: '';
  position: absolute;
  top: -40px;
  left: -90px;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 90px solid #ffffff; /* 这里填你页面的背景色，模拟空心效果 */
}

如果需要更精准控制楔形的角度和形状，clip-path绝对是首选，它能直接裁剪元素成你想要的多边形。比如一个向右的楔形，我们可以定义三个顶点的坐标：

.wedge-clip {
  width: 100px;
  height: 100px;
  background-color: #2c3e50;
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
  /* 坐标解释：左上角(0,0)、左下角(0,100%)、右下角(100%,50%)，浏览器会自动闭合形状 */
}

想调整倾斜角度？直接改第三个坐标就行，比如把100% 50%改成100% 30%，就能得到更陡峭的楔形。

要是你的楔形里需要放文字、图片这类内容，前面两种方法可能会让内容变形，这个方法就能完美解决——通过旋转容器内的元素，再用父容器溢出隐藏来得到楔形，同时内容可以保持正常方向：

.wedge-wrapper {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.wedge-content {
  width: 141px; /* 这里用了勾股定理：100*√2，确保旋转后能完全覆盖父容器 */
  height: 141px;
  background-color: #2c3e50;
  position: absolute;
  top: -20.5px;
  left: -20.5px;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wedge-content p {
  transform: rotate(-45deg); /* 把内容反向旋转，恢复正常显示 */
  color: white;
  margin: 0;
}

对应的HTML结构：

<div class="wedge-wrapper">
  <div class="wedge-content">
    <p>我是带内容的楔形</p>
  </div>
</div>

小提示 #

• 要做不同方向的楔形？比如向左、向上、向下，只需要调整border的方向（比如用border-right代替border-left）、修改clip-path的坐标，或者调整rotate的角度就行。
• 想要响应式的楔形？把固定的px单位换成百分比、vw/vh或者rem就可以啦。

内容的提问来源于stack exchange，提问作者Matt Temple