Как заполнить часть div закругленными углами? Как на картинке: частично заполненный div

css
-3
DenniLa2 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
Programmer 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
Temani Afif 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
Erick Langford Xenes 21 Авг 2018 в 14:15
51950532