html - 在 CSS 中设计圆 Angular 矩形

Question

我正在为一家公司设计一个时间表，该公司将有多个垂直向下堆叠的矩形，但我不知道如何修改矩形的属性，因为我真的不擅长在 CSS 中设计自定义形状。我能够做一个只有右边框的矩形 here .

这是我用来绘制矩形的 CSS:

#box {
    border:10px solid #000;
    border-radius: 10px 40px 40px 10px;
    width: 200px;
    height: 100px;
    background-color:#ccc;
}

到目前为止，我有一个基础，但我不知道如何设计自定义矩形，其中边界线上的部分消失，而另一条线向下。最后，我希望它看起来像这样:

任何人都可以帮助我使用 CSS 设计其中的 2 个自定义矩形吗？我真的很感激，因为我可以继续使用基本自定义矩形进行设计。谢谢大家!

Answer 1

我已经根据您放置在这里的图片制作了一个页面。检查Demo .

span {
    font-size: 20px;
    background: #fff;
  position:absolute;
    top: -20px;
    right: 70px;
  padding:4px;
}
p{
  border-radius: 25px;
    width: 250px;
    height: 150px;
   border:10px solid #000;
    background-color:white;
  position:relative;
  padding-top:15px;
}

p:after{
 position:absolute;
 content: " ";
   width:50px;
    height:50px;
  border-right:10px solid #000;
  right:18px;
  bottom:-55px;
  }
p:last-child:after{border-right:0;}

/HTML代码会像这样/

<div id="box">
<p><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p>
         <p><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p>
         <p>><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p>
 </div>