Как заполнить часть div закругленными углами? Как на картинке: 
-3
21 Авг 2018 в 17:05
3 ответа
Лучший ответ
Вы можете использовать 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>
3
21 Авг 2018 в 14:12
Вы можете использовать линейный градиент, например так:
.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>
2
21 Авг 2018 в 15:09
Вы также можете использовать 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>
0
21 Авг 2018 в 14:15