Question

我正在开发一个有形状的菜单，但在safari中它不能正常工作。在safari中它会损坏布局，我不知道为什么。如果我不使用svg标签并仅使用css clip-path它在safari和chrome中运行良好，但在firefox中则不行。

的CSS：

   .menu {
  width: 65%;
  height: 40px;
  background-color: red;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  -webkit-clip-path: url("#clipping");
  clip-path: url("#clipping");
  position: absolute;
  right: 0px;
  bottom: 0;
}

.menu:before {
  content: '';
  width: 99.8%;
  height: 40px;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  -webkit-clip-path: url("#clipping");
  clip-path: url("#clipping");
  background: black;
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
}

HTML：

<div class="menu">
 <svg width='0' height='0'>
  <defs>
    <clipPath id="clipping" clipPathUnits="objectBoundingBox">
     <polygon points="0.05 0, 1 0, 1 1, 0 1, 0 1" />
    </clipPath>
  </defs>
 </svg>
</div>

谢谢

Answer 1

在safari中为我工作

 <svg viewBox="0 0 250 250">
  <polygon points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
  <polygon points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" />
  <path d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</svg>

Answer 2

safari（webkit）和大多数边缘版本不支持

clip-path css属性。

CSS - 剪辑路径在safari上不能很好地工作

2 个答案: