如何用圆角填充div的一部分？

Question

如何用圆角填充div的一部分？ 像图片上一样：

Answer 1

您可以使用css linear-gradient。

#a {
  border-radius: 15px;
  background: linear-gradient(to right, red 50%, blue 50%);
  float: left;
  padding: 10px;
}

<div id="a">
AAAAA
</div>

Answer 2

您可以使用线性渐变，如下所示：

.button{
  padding: 15px 20px;
  color: #fff;
  display:inline-block;
  background: linear-gradient(to right, rgba(241,112,92,1) 0%, rgba(241,112,92,1) 50%, rgba(246,41,12,1) 50%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
  border-radius: 25px;
}

<a href="#" class="button">Click here !</a>

Answer 3

您也可以使用svg。示例：

.floatTL{
 position:absolute;
    top:0px;
    left:0px;
    width: 200px;
    height: 50px;
}

<div class="floatTL">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       width="200px" height="50px">          
  <rect x="0" y="0" width="130" height="50" rx="15" ry="15" fill="red"/>
  </svg>  
</div>