2

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

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

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

1
  • в помощь cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28248\%2C80\%2C50\%2C1\%29\%200\%25\%2C\%20rgba\%28241\%2C111\%2C92\%2C1\%29\%2050\%25\%2C\%20rgba\%28246\%2C41\%2C12\%2C1\%29\%2051\%25\%2C\%20rgba\%28240\%2C47\%2C23\%2C1\%29\%2071\%25\%2C\%20rgba\%28231\%2C56\%2C39\%2C1\%29\%20100\%25\%29\%3B'
    – C.Raf.T
    1 ноя 2016 в 10:20

1 ответ 1

3

Вариант 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.