LabEx
EntrarÚnete

Borde con triángulo superior

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, aprenderemos a crear un contenedor de contenido con un triángulo en la parte superior utilizando CSS. Este es un elemento de diseño común utilizado en muchos sitios web y aplicaciones para agregar interés visual y crear un sentido de jerarquía. Al final de este laboratorio, tendrás las habilidades para crear este efecto y aplicarlo a tus propios proyectos.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Borde con triángulo superior

index.html y style.css ya se han proporcionado en la VM.

Para crear un contenedor de contenido con un triángulo en la parte superior, siga estos pasos:

  1. Utilice los pseudo-elementos ::before y ::after para crear dos triángulos.
  2. Establezca el border-color y el background-color de los triángulos para que coincidan con el contenedor.
  3. Establezca el border-width del triángulo ::before para que sea 1px más ancho que el triángulo ::after para que actúe como borde.
  4. Coloque el triángulo ::after 1px a la derecha del triángulo ::before para que se muestre el borde izquierdo.

A continuación, se muestra un ejemplo de código HTML para el contenedor:

<div class="container">Border with top triangle</div>

Y aquí está el código CSS correspondiente:

.container {
  position: relative;
  background: #ffffff;
  padding: 15px;
  border: 1px solid #dddddd;
  margin-top: 20px;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 19px;
  border: 11px solid transparent;
}

.container::before {
  border-bottom-color: #dddddd;
}

.container::after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: #ffffff;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio Borde con triángulo superior. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.