Html 带圆角和尖角的div

我正在做一个div，我想把边弄圆。问题是我不想把角弄圆，而是弄尖。有什么建议吗

like tv screen

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

---

小提琴手：

我不太确定我是否理解你的要求，但它是这样的吗

您可以使用以下两个div来实现：

<div class="container">
   <div class="inner">
       Here's some text
   </div>
</div>

这里有一些文字

然后，您可以简单地将背景图像添加到“container”div或使用CSS。以下是我在上一个示例中使用的内容：

<style type="text/css">
.container {
    border-radius: 80px;
    background-color: #d6d6d9;
    padding: 10px;
    width: 200px;
}
.inner {
    background-color: #d6d6d9;
    padding: 40px;
    text-align: center;
}
</style>

.集装箱{
边界半径：80px；
背景色：#D6D9；
填充：10px；
宽度：200px；
}
.内部{
背景色：#D6D9；
填充：40px；
文本对齐：居中；
}

---

我强烈建议您上传一张图片，以澄清您的要求。

此处可能需要一张图纸。什么是圆角边？与“边界半径”（border radius）没有角的效果相同