在底部使用透明三角形切割实现矩形形状

Question

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

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

Answer 1

＆LT; --------------------------------------------- - clip-path解决方案------------------------------------------ -------＆GT;

您可以使用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的浏览器支持----------＆gt; HERE

---

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

由于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;
}

---

＆lt; ---------------------------------------- <svg>没有任何CSS的解决方案----------------------------------------＆gt;

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的浏览器----------＆gt; HERE

Answer 2

一种简单的方法

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在底部产生这种透明切口的一种方法是使用一些偏斜的伪元素并将它们定位，使得它们在底部留下三角形间隙。以下是演示此方法的示例代码段。

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>

---

  

注意：以下代码段仅显示通过使用重叠渐变背景可以实现透明切割的形状。但是，我的建议是尽可能不使用这种方法，因为渐变会产生很多次锯齿状的角落。

您可以在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中），而在其他版本中则很明显。