Прозрачное окно с полностью прозрачной выемкой

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

Вы можете нарисовать фигуру с помощью SVG, а затем установить ее свойства.Вот что вы можете захотеть:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="svg">
    
</svg>

Answer 2

Это то, что вы ищете?

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 на изображение.