如何为div/box容器实现裁切箭头效果 从方形菜单转为目标样式

方案1：使用clip-path直接裁切（推荐） #

无需修改DOM结构，直接通过裁切路径定义元素形状，不会影响内部内容的排版，现代浏览器兼容性良好。

.menu {
  width: 50px;
  height: 50px;
  display: block;
  background-color: red;
  /* 可调整坐标数值修改箭头的角度、大小、朝向 */
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
}

上述代码实现的是右侧带突出箭头的效果，如果需要箭头朝左、或者是凹入式箭头，调整polygon内的坐标参数即可。

方案2：基于现有skew逻辑调整 #

如果需要兼容低版本IE，可以使用你原有的skew思路，需要新增父容器做溢出裁切，避免整个元素倾斜后超出预期显示范围：

<!-- 新增父容器 -->
<div class="menu-wrap">
  <div class="menu"></div>
</div>

.menu-wrap {
  width: 50px;
  height: 50px;
  overflow: hidden;
}
.menu {
  width: 120%; /* 宽度大于父容器，保证倾斜后可覆盖显示区域 */
  height: 100%;
  background-color: red;
  -ms-transform: skew(-30deg); /* IE 9 */
  -webkit-transform: skew(-30deg); /* Chrome, Safari, Opera */
  transform: skew(-30deg); /* 标准语法 */
  margin-left: -20%; /* 调整偏移量控制箭头显示位置 */
}

如果菜单内有文字内容，需要给文字标签添加反向skew抵消倾斜，避免文字变形：

.menu .content {
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}

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