Я пытаюсь создать div с двумя цветами (см. Ниже img), но я могу сделать только 50% каждую половину. Как создать ниже два разных цвета? Пожалуйста, помогите мне image

0
ravan one 20 Авг 2018 в 16:57

4 ответа

Лучший ответ

Попробуй это:

#x {
	width: 200px;
	height: 0px;
	border-top: 100px solid red;
	border-left: 100px solid green;
}
<div id="x">
</div>

Поскольку мы использовали границы для создания div, вам, возможно, придется соответствующим образом расположить внутреннее содержимое деления. Например,

#x {
	width: 200px;
	height: 0px;
	border-top: 100px solid red;
	border-left: 100px solid green;
}

#y {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 15px;
  width: 300px;
  height: 100px;
}
<div id="x">
  <div id="y">
    Hi there! I am the inner content! :)
  </div>
</div>
4
dedman 20 Авг 2018 в 14:18

Вы можете использовать градиент фона для настройки угла и остановки по мере необходимости:

div {
height: 100px;
background: linear-gradient(60deg, green 0%, green 16%, red 16%);
}
<div></div>
1
j08691 20 Авг 2018 в 14:36

Возможно, это скорее уловка, но если вы знаете высоту div, вы можете поиграть с линейным градиентом, чтобы соответствовать желаемому.

div {
  height: 225px;
  width: 100%;

  background: #00ff00;
  background: -moz-linear-gradient(40deg, #00ff00 0%, #30ff30 25%, #0000ff 25%, #0000e8 100%);
  background: -webkit-linear-gradient(45deg, #00ff00 0%,#30ff30 25%,#0000ff 25%,#0000e8 100%);
  background: linear-gradient(45deg, #00ff00 0%,#30ff30 25%,#0000ff 25%,#0000e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#0000e8',GradientType=1 );
}
<div></div>
1
Arno Tenkink 20 Авг 2018 в 14:37

Вы должны будете использовать: before и: after элементы, чтобы достичь этого только с одним div, но если бы вы могли использовать более одного, то вы могли бы сделать это:

Создайте внешний прямоугольник, который содержит красный и зеленый цвета, и поместите переполнение, скрытое на этом, так, чтобы оно в целом выглядело как прямоугольник. Тогда внутри вы можете создать красный прямоугольник и зеленый прямоугольник, но поместить преобразование: наклоните красный прямоугольник так, чтобы он создал диагональную линию. Используйте z-index, чтобы поместить красный прямоугольник поверх зеленого прямоугольника, и это должно помочь вам достичь этого.

0
Emma Dalby 20 Авг 2018 в 14:03
51932360