实现一个底部带有透明三角形切口的矩形

Question

我想用 CSS3 创建一个非矩形图像，我想实现如下图

它是一个底部有一个 transparent 三角形间隙的正方形，我知道我可以用一些技巧来实现它，例如 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 元素，并在 clipPath 内定义 points 的 polygon 元素。给 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

Answer 2

一个简单的方法

在伪元素上使用box-shadow，在主元素上使用overflow: hidden;。

div {
    height: 150px;
    width: 200px;
    position: relative;
    overflow: hidden;
}
div:before{
    position: absolute;
    top: 100px;
    left: 67px;
    content: "";
    height: 50px;
    width: 50px;
    background: transparent;
    transform-origin:0% 100%;
    transform: rotate(52deg) skewX(10deg);
    -webkit-transform: rotate(52deg) skewX(10deg);
    box-shadow: 0 0 0 200px black;
}

<div></div>

Answer 3

在底部产生这种透明切割的一种方法是使用几个倾斜的伪元素并将它们定位，以便它们在底部留下一个三角形的间隙。以下是演示此方法的示例 sn-p。

body {
  background: url("http://lorempixel.com/200/400");
}
.shape {
  height: 200px;
  width: 200px;
  overflow: hidden;
  position: relative;
}
.shape:before {
  height: 100%;
  width: 100%;
  position: absolute;
  content: '';
  background: black;
  left: 0px;
  top: 0px;
  -webkit-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  transform: skew(-30deg);
  -webkit-transform-origin: 25% -25%;
  -moz-transform-origin: 25% -25%;
  transform-origin: 25% -25%;
}
.shape:after {
  height: 100%;
  width: 100%;
  position: absolute;
  content: '';
  right: 0px;
  top: 0px;
  background: black;
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  transform: skew(30deg);
  -webkit-transform-origin: 25% -25%;
  -moz-transform-origin: 25% -25%;
  transform-origin: 25% -25%;
}

<div class="shape"></div>

---

注意： 下面的 sn-p 只是为了表明通过使用重叠渐变背景可以实现具有透明切割的形状。但是，我的建议是尽可能不要使用这种方法，因为渐变很多时候会产生锯齿状的角。

您可以在div 上使用两个重叠的线性渐变背景来实现此效果。可以通过修改渐变的角度来修改三角形的角度。经过测试，发现它在 Mozilla FireFox、Chrome、Safari 和 Opera 中运行良好。

body {
  background: url("http://lorempixel.com/200/400");
}
.shape {
  height: 200px;
  width: 400px;
  background: -webkit-linear-gradient(-10deg, black 50%, transparent 50%), -webkit-linear-gradient(10deg, transparent 50%, black 50%);
  background: -moz-linear-gradient(-10deg, black 50%, transparent 50%), -moz-linear-gradient(10deg, transparent 50%, black 50%);
  background: linear-gradient(100deg, black 50%, transparent 50%), linear-gradient(-100deg, black 50%, transparent 50%);
}

<div class="shape"></div>

这种方法的一个潜在缺点是边缘在 Chrome 中不是很锐利（至少在旧版本的 Chrome 中），而在其他版本中却很锐利。