html - 实现一个底部有透明三 Angular 形切口的矩形

Question

我想用 CSS3 创建一个非矩形图像，我想实现类似下图的东西

它是一个底部有一个透明三 Angular 形间隙的正方形，我知道我可以用一些技巧来实现它，例如 png 图像，但我想用 HTML 元素而不是图像来创建它,任何人都知道我该怎么做？可以用 HTML 和 CSS 实现吗？

Answer 1

<-------------------------------------------- - clip-path解决方案 - - - - - - - - - - - - - - - - - - - - - - - - ->

你可以使用 clip-path这样做:

dabblet

.rect {
    position: absolute;
    width: 165px;
    height: 100px;
    background-color: black;
    -webkit-clip-path: polygon(0 0, 0 100%, 40% 100%, 50% 75%, 60% 100%, 100% 100%, 100% 0%);
}

body {
    background-color: lightblue;
}

注意:Firefox 不支持此属性。

在 Chrome 上运行良好。

查看浏览器对 clip-path 的支持----------> HERE .

---

<------------------------ <svg>解决方案——将支持所有浏览器[IE8除外]------------------------>

因为，Firefox 仍然支持clip-path: url() ，您可以创建内联 svg带有 polygon 的元素里面的元素clipPath定义了 points .给出 clipPath元安id ( #mask ) 并在 CSS 中使用它而不是 polygon(0 0, 0 100%, 40% 100%, 50% 75%, 60% 100%, 100% 100%, 100% 0%); .

dabblet

HTML:

<div class="rect"></div>
<svg>
  <defs>
    <clipPath id="mask">
      <polygon points="0,0 0,100 66,100 82.5,75 99,100 165,100 165,0 " />
    </clipPath>
  </defs>
</svg>

CSS:

.rect {
    position: absolute;
    width: 165px;
    height: 100px;
    background-color: black;
    -webkit-clip-path: url(#mask);
    clip-path: url(#mask);
}
body {
    background-color: lightblue;
}

---

<---------------------------------------- <svg>没有任何 CSS 的解决方案 -------------------------------------->

dabblet

HTML:

<svg>
    <polygon points="0,0 0,100 66,100 82.5,75 99,100 165,100 165,0" style="fill:black" />
</svg>

查看支持 svg 的浏览器----------> HERE