如何制作电视屏幕形状的边框？

Question

这就是我想要的，绿色边框作为电视屏幕形状：

这真的很难。

你能帮帮我吗？

我试过电视屏幕形状的css3代码：

a{display:block; width: 200px; height:150px; border: 1px solid #B0C523;
    border-radius: 80%/30%;}

a:before{content: "";
    border-radius: 30%/80%;
    left: -4%;
    right: -4%;
    border: 1px solid #B0C523;
    top: 11%;
    bottom: 11%;
    background-color: transparent;}

但这不对

Answer 1

我玩过宽度高度和半径。

.rec {
 
  width: 220px;
  height: 90px;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
  font: 50px helvetica bold;
  border: 2px solid hsl(70, 53%, 70%);
  border-radius: 23% 23% 23% 23% / 30% 30% 30% 30%;
  letter-spacing: 1px;
}

<div class="rec">
  <a>HOME</a>
 </div>