Background блока на 50% его высоты

174
26 ноября 2016, 18:38

Друзья, ситуация такая, есть блок, размер 100px на 100px;

<div style="width:100px; height:100px; background: ???;"></div>

я хочу его заполнить цветом, к примеру красным на 50% его высоты. Как с помощью css это сделать? мне нужно что бы не заполненная половина либо была цвета f6f6f6 либо прозрачная, Я так понимаю это можно сделать и градиентом но с четкой границей цвета а не плавной, но я не могу найти удачный пример такого кода..

Answer 1

Вариант 1

CSS Gradient Generator

div { 
  margin: 15px 0; 
  width: 100px; 
  height: 100px; 
  background: #000; 
  border: 1px solid #ccc; 
  background: rgb(255, 0, 0);  /* Old browsers */ 
  background: -moz-linear-gradient(top, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%);  /* FF3.6-15 */ 
  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%);  /* Chrome10-25,Safari5.1-6 */ 
  background: linear-gradient(to bottom, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%);  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#f6f6f6', GradientType=0);  /* IE6-9 */ 
} 
.horizontal { 
  background: rgb(255, 0, 0);  /* Old browsers */ 
  background: -moz-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%);  /* FF3.6-15 */ 
  background: -webkit-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%);  /* Chrome10-25,Safari5.1-6 */ 
  background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(246, 246, 246, 1) 50%, rgba(246, 246, 246, 1) 100%);  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#f6f6f6', GradientType=1);  /* IE6-9 */ 
}
<div></div> 
<div class="horizontal"></div>

Вариант 2

div { 
  margin: 15px 0; 
  width: 100px; 
  height: 100px; 
  position: relative; 
  border: 1px solid #ccc; 
  background: #f6f6f6; 
} 
div:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 50%; 
  background: #f00; 
} 
.horizontal:before { 
  height: 100%; 
  width: 50%; 
}
<div></div> 
<div class="horizontal"></div>

READ ALSO
Как сделать кнопку по центру?
CSS

Как сделать кнопку по центру?

 512
Плавная анимация назад
CSS

Плавная анимация назад

 429
Ссылки вокруг картинки [закрыто]
CSS

Ссылки вокруг картинки [закрыто]

Подскажите пожалуйста варианты как можно сделать ссылки вокруг картинки как на изображении ниже

 225
Перенос телефона в Шапке сайта
CSS

Перенос телефона в Шапке сайта

Всем доброго времени сутокСайта на Wp

 276