1

'Estoy tratando de hacer un forma concreta en css para no tener que usar imágenes y nose si va ser posible hacerla.. Llevo un rato con ello y no hay manera. ¿Alguien puede ayudarme?

introducir la descripción de la imagen aquí

Este es el código que más se acercó...

body{
	background-color: white;
	font-size:16px;

}
.container{
	
	width: 100%;
	height: 4em;
	background-color: #ccc;
}

.container div:nth-child(1){
	margin:0;
	display:inline-block;
	width:15%;
	height: 3.5em;
	background-color: green;
	border-bottom-right-radius: 50% 10px;
	
}

.container div:nth-child(2){
	margin:0;
	display:inline-block;
	width:70%;
	height: 3.5em;
	background-color: yellow;
	border-bottom-left-radius: 40% 50%;
	border-bottom-right-radius: 40% 50%;
}

.container div:nth-child(3){
	margin:0;
	display:inline-block;
	width:15%;
	height: 3.5em;
	background-color: red;
	border-bottom-left-radius: 40% 40%;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cunt</title>
	<link rel="stylesheet" href="prueba.css">

</head>
<body>
	<div class="container">
		<div></div><div></div><div></div>
	</div>
</body>
</html>

2

1 respuesta 1

0

Lo más fácil sería utilizar SVG:

*{margin:0;padding:0}
<svg viewBox="0 0 659 80.184">
<path fill="#ead4a2" d="M0,70c0,0,49-7,85-5s164,17,245,15s209-15.719,261-15.359s68,7.768,68,7.768V0H0V70z"/>
</svg>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.