Закрасить половину div

141
29 сентября 2019, 15:40

Подскажите пожалуйста, как закрасить div на половину красным цветом?

<div style="width:200px; height:200px; border:1px solid;background:red;"> 
</div>

Answer 1

linear-gradient

div { 
  width: 200px; 
  height: 200px; 
  border: 1px solid; 
  background: linear-gradient(to right, red 50%, transparent 50%); 
}
<div></div>

pseudo-elements

div { 
  width: 200px; 
  height: 200px; 
  border: 1px solid; 
  position: relative; 
} 
 
div::before { 
  content: ""; 
  position: absolute; 
  width: 50%; 
  height: 100%; 
  z-index: -1; 
  background: red; 
}
<div></div>

Answer 2

box-shadow

div { 
  width: 200px; 
  height: 200px; 
  border:1px solid #000; 
  box-shadow: inset 100px 0 #f00; 
}
<div></div>

READ ALSO
Резиновый DIV с круглым низом

Резиновый DIV с круглым низом

Вопрос вроде простой, но поставил в тупик

115
Проблемы с RenderBody

Проблемы с RenderBody

Не давно начал работать в asp net mvc, после небольшой наработки страниц _Layout и Index в _Layout RenderBody начал создавать проблемы, то есть после него перестали...

123
Шорткод в WordPress

Шорткод в WordPress

Есть кусок кода (html+php) который выводит посты из определенного типа постов в виде карусели, мне нужно чтобы этот блок можно было выводить в определенном...

136