你可以使用一个简单的正方形元素，圆化边框，然后旋转它。下面是一个示例，其中::after仅用于预览

.wrapper {
  position: relative;
  background: purple;
  border-radius: .5rem;
  padding: .75rem;
  color:white;
  margin-top: 2rem;
}

.wrapper::before, .wrapper::after {
  content: "";
  display:block;
  width: 30px;
  aspect-ratio:1/1;
  position: absolute;
  right: 20px;
  top: -10px;
  background: linear-gradient(to bottom right, purple 50%, transparent 50%);
  border-radius: 30%;
  transform: rotate(45deg);
}

.wrapper::after {
  left: 20px;
  background: linear-gradient(to bottom right, orange 50%, transparent 50%);
}

<br>
<div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolor veritatis, cum accusantium fugit modi, exercitationem, accusamus unde assumenda illum aperiam laborum dignissimos voluptatem explicabo optio praesentium quae veniam tempora.</div>

备注

linear-gradient只是填充一半，所以它不会隐藏文本，您可以使用z索引并简单地将其推到文本下方

background: linear-gradient(to bottom right, purple 50%, transparent 50%);