El diseño de una página web o proyecto de software suele ser muy importante a la hora de manejar la usabilidad, que la interfaz sea intuitiva y que la navegación sea agradable. Para ello, se aplican distintos estilos para que el usuario tenga una buena experiencia a la hora de utilizar la página web o software.
Hoy vamos a hablar de la opción de crear border-radius invertido con CSS para que un proyecto se vea más moderno e intuitivo.
Como siempre, nuestro profesor del bootcamp, Sergio Jiménez, ha preparado un vídeo para explicar detalladamente cómo realizar este efecto en un proyecto utilizando solo CSS. Sigue paso a paso el vídeo para aprender cómo llevarlo a cabo.
Aceptar el consentimiento para ver esto
Para empezar, Sergio parte del siguiente código HTML inicial con una imagen y un icono:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css"
/>
<link
rel="stylesheet"
href="style.css"
/>
<title>Border Radius Invertido</title>
</head>
<body>
<div class="card">
<img decoding="async"
src="./spiderman-comic.jpg"
alt="Portada de un comic de Spiderman"
/>
<div class="icon">
<i class="ti ti-thumb-up"></i>
</div>
</div>
</body>
</html>
Por otra parte, el archivo CSS predefinido comienza con el siguiente código:
:root {
--primary-color: gray;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
background-color: var(--primary-color);
display: grid;
place-items: center;
}
Lo primero que se hace es crear variables dentro de la clase llamada card y empezar a aplicar estilos. En nuestro ejemplo, se añade el siguiente código al archivo de CSS:
.card {
--border-radius: 8px;
--border-icon: 5px;
--icon-size: 2.5rem;
width: 20rem;
height: 30rem;
position: relative;
img {
border-radius: var(--border-radius);
width: 100%;
height: 100%;
object-fit: cover;
}
.icon {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: var(--icon-size);
aspect-ratio: 1;
}
i {
width: 100%;
height: 100%;
background-color: black;
color: white;
font-size: 1.3rem;
padding: 0.3rem;
display: grid;
place-items: center;
}
}
De esta forma, conseguirás poner el icono en la parte superior derecha de la imagen y crear una separación de esta.
Para terminar, tendrás que aplicar el border-radius invertido, aplicando esta propiedad de forma correcta en las clases icon y card, así como en el div correspondiente. Añadiendo esto al código anterior, quedaría así:
.card {
--border-radius: 8px;
--border-icon: 5px;
--icon-size: 2.5rem;
width: 20rem;
height: 30rem;
position: relative;
img {
border-radius: var(--border-radius);
width: 100%;
height: 100%;
object-fit: cover;
}
.icon {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: var(--icon-size);
aspect-ratio: 1;
background-color: var(--primary-color);
border-left: var(--border-icon) solid var(--primary-color);
border-bottom: var(--border-icon) solid var(--primary-color);
border-bottom-left-radius: calc(var(--border-radius) + var(--border-icon));
}
i {
width: 100%;
height: 100%;
background-color: black;
color: white;
font-size: 1.3rem;
padding: 0.3rem;
display: grid;
place-items: center;
border-radius: var(--border-radius);
}
&::after,
&::before {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-top-right-radius: var(--border-radius);
box-shadow: 3.5px -3.5px var(--primary-color);
}
&::after {
top: 0;
right: var(--icon-size);
}
&::before {
top: var(--icon-size);
right: 0;
}
}
El resultado es el que se requiere aplicando propiedades dentro de CSS.
Puedes encontrar también el código en nuestro repositorio de GitHub: border-radius-Invertido-CSS.
Aprende mucho más sobre programación y obtén los conocimientos que necesarios para dedicarte a ello con nuestro Bootcamp Full Stack Web Developer. La formación que necesitas en solo 16 semanas y 33 horas de clase a la semana.
