1

Estou com um gradient para fazer, com uma divisão de 5 cores e no intervalo de cada uma, tem que ser exatamente dividido.

Segue imagem do que preciso fazer:

inserir a descrição da imagem aqui

O que eu consegui fazer com CSS:

.area{
  width: 100%;
  padding: 10px 0;
  position: relative;
}
.area::before {
background: linear-gradient(to right, #e1202d 0%, #ef8e3b 25%, #075f20 50%, #001a42 75%, #023e79 100%);
content: '';
position: absolute;
height: 6px;
top: 0;
width: 100%;
}
<div class="area">
Hello world
</div>

A dúvida é, como tiro esse gradiente na divisão de cores e deixo exatamente como na imagem?

1 Resposta 1

2

Você pode utilizar assim, determinando o o range de início e término da cor:

.area{
	width: 100%;
	padding: 10px 0;
	position: relative;
}
.area::before{
	background-image:linear-gradient(
		to right,
		#e1202d 20%,
		#ef8e3b 20%,
		#ef8e3b 40%,
		#075f20 40%,
		#075f20 60%,
		#001a42 60%,
		#001a42 80%,
		#023e79 80%
	);
	content: '';
	position: absolute;
	height: 6px;
	top: 0;
	width: 100%;
}
<!DOCTYPE html>
<html>
<head>
	<title>teste</title>
</head>
<body>
 <div class="area">
 	Hello World!
 </div>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .