Las esquinas redondeadas ahora son trivialmente fáciles de lograr a través de border-radius. Pero eso solo nos permite cortar la forma. ¿Qué pasa si queremos conectar una forma a otra con una esquina redondeada hacia afuera? Mucho más fácil de explicar con un gráfico:
Las esquinas superiores son fáciles, solo border-radius. Las esquinas inferiores, menos fáciles.
Ver demostración Descargar archivos
Limpiar HTML
Por supuesto, en la web, casi cualquier cosa visual es posible. En el peor de los casos, puedes usar imágenes. Nuestro objetivo aquí, como siempre, es no usar imágenes (¡rápido! ¡accesible! ¡fácil de actualizar!) y usar HTML semántico completamente limpio (¡rápido! ¡accesible! ¡fácil de actualizar!). Así que aquí está el marcado:
<ul class="tabs group">
<li class="active"><a href="https://css-tricks.com/tabs-with-round-out-borders/#one">One</a></li>
<li><a href="https://css-tricks.com/tabs-with-round-out-borders/#two">Two</a></li>
<li><a href="https://css-tricks.com/tabs-with-round-out-borders/#three">Three</a></li>
<li><a href="https://css-tricks.com/tabs-with-round-out-borders/#three">Four</a></li>
</ul>una clase de active indica qué pestaña refleja la página actual.
como esta bajando esto
La razón por la que esto es complicado es que necesitamos una forma que sobresalga del elemento de pestaña. Para hacer esto mientras mantenemos nuestro marcado limpio, usaremos pseudo elementos. Si necesita un repaso, puede aprender sobre ellos aquí y aquí. Esencialmente, pueden agregar elementos adicionales a la página que podemos diseñar, directamente a través de CSS. Cada elemento puede tener dos: :before y :after. En última instancia, usaremos cuatro por pestaña, lo cual es posible porque cada pestaña está formada por dos elementos, el elemento de la lista y el enlace de anclaje.
Visualicemos esto paso a paso, sin mirar ningún código todavía.
1) Estado Natural
Los elementos de la lista están naturalmente a nivel de bloque y los enlaces de anclaje están en línea, por lo que el diseño es así.
2) flotar
Al hacer flotar los elementos de la lista hacia la izquierda, los elementos de la lista se alinearán uno al lado del otro y se reducirán al tamaño de los enlaces de anclaje dentro de ellos.
3) mismo tamaño
Los elementos de la lista en sí mismos no tienen margen ni relleno, por lo que realmente los elementos de la lista y los enlaces de anclaje tienen exactamente el mismo tamaño, directamente uno encima del otro.
4) Solo uno
Centrémonos en uno solo de ellos…
5) Círculos
6) cuadrados
Con los otros dos pseudo elementos haremos cuadrados más pequeños.
7) Colorea la pestaña y el contenido
La pestaña “activa” y el contenido compartirán el mismo color de fondo.
8) Colorea los pseudo elementos
Los cuadrados coinciden con el color de la pestaña activa, los círculos coinciden con el fondo detrás de ellos.
9) Apilamiento
Con el índice z, nos aseguraremos de que el círculo quede encima y corte el color del cuadrado.
10) Sin fronteras
Los bordes eran solo ilustrativos, en realidad se vería más así.
11) Acabado
Agregue el mismo concepto a las pestañas exteriores y redondee las tapas con border-radius ¡y ya está!
CSS
Este es un gran bloque de CSS, pero he tratado de comentarlo para que cada parte tenga sentido.
.tabs li {
/* Makes a horizontal row */
float: left;
/* So the psueudo elements can be
abs. positioned inside */
position: relative;
}
.tabs a {
/* Make them block level
and only as wide as they need */
float: left;
padding: 10px 40px;
text-decoration: none;
/* Default colors */
color: black;
background: #ddc385;
/* Only round the top corners */
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.tabs .active {
/* Highest, active tab is on top */
z-index: 3;
}
.tabs .active a {
/* Colors when tab is active */
background: white;
color: black;
}
.tabs li:before, .tabs li:after,
.tabs li a:before, .tabs li a:after {
/* All pseudo elements are
abs. positioned and on bottom */
position: absolute;
bottom: 0;
}
/* Only the first, last, and active
tabs need pseudo elements at all */
.tabs li:last-child:after, .tabs li:last-child a:after,
.tabs li:first-child:before, .tabs li:first-child a:before,
.tabs .active:after, .tabs .active:before,
.tabs .active a:after, .tabs .active a:before {
content: "";
}
.tabs .active:before, .tabs .active:after {
background: white;
/* Squares below circles */
z-index: 1;
}
/* Squares */
.tabs li:before, .tabs li:after {
background: #ddc385;
width: 10px;
height: 10px;
}
.tabs li:before {
left: -10px;
}
.tabs li:after {
right: -10px;
}
/* Circles */
.tabs li a:after, .tabs li a:before {
width: 20px;
height: 20px;
/* Circles are circular */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #222;
/* Circles over squares */
z-index: 2;
}
.tabs .active a:after, .tabs .active a:before {
background: #ddc385;
}
/* First and last tabs have different
outside color needs */
.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
background: #222;
}
.tabs li a:before {
left: -20px;
}
.tabs li a:after {
right: -20px;
}¡Eso es eso!
Ver demostración Descargar archivos
Debería funcionar en casi cualquier navegador decente y también en IE 9 y superior. También debería retroceder bien (sin redondeos) en navegadores más antiguos.
Método Steve Smith
Aproximadamente en el momento exacto en que estaba creando esto para incluirlo en una charla que estaba haciendo sobre pseudo elementos. Steve Smith de Ordered List publicó un método muy similar. El método de Steve tiene bordes alrededor de las pestañas, el mío tiene pestañas pegadas entre sí. Ambos geniales si me preguntas.