CSS：实现矩形边缘有个往里凹的小半圆

怎样制作如上图形?

首先可以看到是有两个部分组成，左边的小图，和右边往里凹的矩形。
（暂时不说左边的情况了，具体看右边形状的设置）

主要思路：

构建一个矩形，再利用border-radius将他的左边部分设置为往里凹的状态。

具体代码：

<div id="tip-r">
      <dd class="butt"> 我的福利&nbsp;&nbsp;></dd>
      <u style="font-style: normal"></u>
</div>

#tip-r
{
    width:200px;
    height:45px;
    position: relative;
    /*border:1px solid red;*/
}
#tip-r .butt
{
    width:160px;
    height:45px;
    font-size: 16px;
    text-align: center;
    line-height: 45px;
    color:yellow;
    padding-left: 10px;
    margin-left: 30px;
    position:absolute;
    background-color:#e54155;
}
.butt::before
{
    content: "";                //利用这句代码撑开容器
    width: 45px;
    height: 45px;
    background: #FFF;
    position: absolute;
    top:0px;
    left:-22px;
    display: block;
    border-radius:0px 45px 45px 0px;         //来设置往里凹的部分的大小
    font-family: "FontAwesome";
}