Crea un contenedor de contenido con un triángulo en la parte superior

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35170{{"Borde con triángulo superior"}} css/colors -.-> lab-35170{{"Borde con triángulo superior"}} css/margin_and_padding -.-> lab-35170{{"Borde con triángulo superior"}} css/borders -.-> lab-35170{{"Borde con triángulo superior"}} css/positioning -.-> lab-35170{{"Borde con triángulo superior"}} css/backgrounds -.-> lab-35170{{"Borde con triángulo superior"}} css/pseudo_elements -.-> lab-35170{{"Borde con triángulo superior"}} end

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:

Utilice los pseudo-elementos ::before y ::after para crear dos triángulos.
Establezca el border-color y el background-color de los triángulos para que coincidan con el contenedor.
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.
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.