html - hacer - ¿Puedo crear un div con un fondo curvo?
title html attribute (5)
CSS:
div{
background-color:black;
width:500px;
height:50px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
Ves esta bien para ti: DEMO
Así que estoy trabajando en un sitio y me preguntaba si es posible, simplemente utilizando HTML5, CSS3 (y JavaScript si es necesario), hacer un div con un fondo curvo, por lo que se verá prácticamente así:
¿O esto solo puede hacerse usando una imagen de fondo?
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</body>
Esto es lo que quieres:
div{
background-color: black;
width: 500px;
height: 200px;
border-radius: 0 0 50% 50% / 15%;
}
Hay diferentes enfoques que pueden adoptarse para crear esta forma. A continuación se muestra una descripción detallada de las posibilidades:
Enfoques basados en SVG:
SVG es la forma recomendada para crear tales formas. Ofrece simplicidad y capacidad de escala. A continuación hay un par de formas posibles:
1- Usando Elemento de Ruta:
Podemos usar el elemento de path SVG para crear esta forma y rellenarla con un color sólido, un degradado o un patrón.
Solo se utiliza un atributo d para definir formas en el elemento de path . Este atributo en sí contiene una serie de comandos cortos y algunos parámetros que son necesarios para que esos comandos funcionen.
A continuación se muestra el código necesario para crear esta forma:
<path d="M 0,0
L 0,40
Q 250,80 500,40
L 500,0
Z" />
A continuación se muestra una breve descripción de los comandos de path utilizados en el código anterior:
-
McomandoMse utiliza para definir el punto de partida. Aparece al principio y especifica el punto desde donde debe comenzar el dibujo. -
LcomandoLse usa para dibujar líneas rectas. -
QcomandoQse utiliza para dibujar curvas. -
ZcomandoZse utiliza para cerrar la ruta actual.
Imagen de salida:
Demostración de trabajo:
svg {
width: 100%;
}
<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="black" />
</svg>
2- Clipping:
Recortar significa eliminar u ocultar algunas partes de un elemento.
En este enfoque, definimos una región de recorte utilizando el elemento clipPath de SVG y aplicamos esto a un elemento rectangular. Se ocultará cualquier área que esté fuera de la región de recorte.
A continuación se muestra el código necesario:
<defs>
<clipPath id="shape">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
</clipPath>
</defs>
<rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />
A continuación se muestra una breve descripción de los elementos utilizados en el código anterior:
-
defselementodefsse utiliza para definir elementos / objetos para su uso posterior en documentos SVG. -
clipPathelementoclipPathse utiliza para definir una región de recorte. -
rectelementorectse utiliza para crear rectángulos. -
clip-pathatributoclip-pathse utiliza para vincular el trazado de recorte creado anteriormente.
Demostración de trabajo:
svg {
width: 100%;
}
<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
<defs>
<clipPath id="shape">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
</clipPath>
</defs>
<rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />
</svg>
Enfoques basados en CSS:
1- Usando el pseudo elemento:
Podemos usar ::before o ::after pseudo element para crear esta forma. Los pasos para crear esto se dan a continuación:
- Cree una capa con
::beforeOR::afterpseudoelement que tenga ancho y alto más que su padre. - Agregue
border-radiuspara crear la forma redondeada. - Agregar
overflow: hiddenen el padre para ocultar la parte innecesaria.
HTML requerido:
Todo lo que necesitamos es un único elemento div que posiblemente tenga alguna clase de shape :
<div class="shape"></div>
Demostración de trabajo:
.shape {
position: relative;
overflow: hidden;
height: 80px;
}
.shape::before {
border-radius: 100%;
position: absolute;
background: black;
right: -200px;
left: -200px;
top: -200px;
content: '''';
bottom: 0;
}
<div class="shape"></div>
2- Gradiente radial:
En este enfoque usaremos la función radial-gradient() CSS3 para dibujar esta forma en el elemento como fondo. Sin embargo, este enfoque no produce una imagen muy nítida y puede tener algunas esquinas irregulares.
HTML requerido:
Solo se requerirá un solo elemento div con alguna clase, es decir,
<div class="shape"></div>
CSS necesario:
.shape {
background-image: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%);
}
Demostración de trabajo:
.shape {
background: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%) no-repeat;
height: 80px;
}
<div class="shape"></div>
Enfoques basados en JavaScript:
Aunque no es obligatorio en este caso, pero en aras de la integridad, también estoy agregando este enfoque. Esto puede ser útil en algunos casos también:
Lienzo HTML5:
Podemos dibujar esta forma en el elemento HTML5 Canvas utilizando funciones de ruta:
var canvas = document.getElementById(''canvas'');
var ctx = canvas.getContext(''2d'');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 40);
ctx.quadraticCurveTo(311, 80, 622, 40);
ctx.lineTo(622, 0);
ctx.fill();
<canvas id="canvas" width="622" height="80"></canvas>
A continuación se muestra una breve descripción de los métodos utilizados en el código anterior:
-
beginPath()se utiliza para crear una nueva ruta. Una vez que se crea una nueva ruta, los futuros comandos de dibujo se dirigen a la ruta. -
moveTo(x, y)mueve el lápiz a las coordenadas especificadas porxey. -
lineTo(x, y)dibuja una línea recta desde la posición actual de la pluma hasta el punto especificado porxey. -
quadraticCurveTo(cp1x, cp1y, x, y)dibuja una curva desde la posición actual del lápiz hasta el punto especificado poryutilizando el punto de control especificado porcp1xycp1y. -
fill()rellena la ruta actual utilizando una regla de devanado no nula o impar.
Recursos útiles:
Prueba esto
.navbar{
border-radius:50% 50% 0 0;
-webkit-border-radius:50% 50% 0 0;
background:#000;
min-height:100px;
}
Sí, puede hacer esto en CSS: básicamente haga que la división sea más ancha que la página para corregir los bordes demasiado redondeados, luego posicione a la izquierda para compensar, con el radio del borde inferior que usa ambos valores de x e y, y un margen inferior negativo para compensar el hueco:
border-bottom-left-radius: 50% 200px; // across half & up 200px at left edge
border-bottom-right-radius: 50% 200px; // across half & up 200px at right edge
width: 160%; overflow: hidden; // make larger, hide side bits
margin-bottom: -50px; // apply negative margin to compensate for bottom gap
position: relative; left:-30%; // re-position whole element so extra is on each side (you may need to add display:block;)