'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?
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>