带有完全透明凹口的透明窗口

Question

我想制作一个带有完全透明的缺口的透明窗口。但是可能我做错了。有人可以帮我吗？

body {
  background-color: blue;
}

.clear {
  background: rgba(255, 255, 255, 0.7);
}

.line {
  background: White;
  border-bottom-left-radius: 3vh;
  border-bottom-right-radius: 3vh;
  height: 3vh;
  width: 50%;
  margin-left: 25%;
}

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
  <tbody>
    <tr>
      <td valign="top">
        <div class="clear">
          <div class="line"></div><br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
      </td>
    </tr>
  </tbody>
</table>

我得到的结果：

基本上，我想使该凹口对背景完全透明。我该如何做到这一点？

Answer 1

这是您要找的吗？

body {
  background-color: blue;
}

.clear {
  background-image: url("https://image.ibb.co/bC1LOp/White-Shape.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.7;
}

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
  <tbody>
    <tr>
      <td valign="top">
        <div class="clear">
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
      </td>
    </tr>
  </tbody>
</table>

在这里，我已经制作了一张我相信您想要的图像，并且将.clear的背景色更改为该图像。

Answer 2

您可以使用SVG绘制形状，然后设置其属性。这就是您可能想要的：

while (1) {
    printf("press enter to continue \n");
    char prompt;
    prompt = getchar();
    if(prompt == 0x0A){
        break;
    }
}

// Declare container width
var vw = $("#svg").width();

// Declare container height
var vh = $("#svg").height();

$("#svg").html("<g id='polygon'><polygon points='0,0 " + ((vw / 100) * 25) + ",0 " + ((vw / 100) * 30) + ",10 " + ((vw / 100) * 70) + ",10 " + ((vw / 100) * 75) + ",0 " + vw + ",0 " + vw + "," + vh + " 0," + vh + "' /></g> Sorry, your browser does not support inline SVG");

body {
  background-color: blue;
  margin: none;
}

#polygon {
  fill: white;
  fill-opacity: 0.7;
  stroke: red;
}

#svg {
  width: 98%;
  height: 90vh;
  margin: 1%;
}