¿Cómo crear un triángulo transparente con borde usando CSS?

Recuerda que en la informática un problema casi siempre tiene más de una resoluciones, pero nosotros compartimos lo más óptimo y mejor.

Solución:

he encontrado un solo webkit solución, usando el carácter ▲:

.triangle 
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;

▲

Extras:

• ¿Puede usar una referencia para text-stroke – todos los principales navegadores cubiertos a partir de 2019
• Artículo de trucos CSS
• Formas HTML útiles

Versión de borde CSS:

.triangle 
    position: relative;
    width:0;
    border-bottom:solid 50px black;
    border-right:solid 30px transparent;
    border-left:solid 30px transparent;

.triangle .empty 
    position: absolute;
    top:9px;
    left:-21px;
    width:0;
    border-bottom:solid 36px white;
    border-right:solid 21px transparent;
    border-left:solid 21px transparent;

Agregar un triángulo blanco dentro del negro: http://jsfiddle.net/samliew/Hcfsx/

Aquí hay una idea usando múltiples antecedentes y linear-gradient:

.triangle 
  width:100px;
  height:100px;
  
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,#000 50% calc(50% + 10px),
      transparent calc(50% + 11px)) right/50% 100%,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,#000 50% calc(50% + 10px),
      transparent calc(50% + 11px)) left/50% 100%,
    /* bottom side*/
    linear-gradient(#000,#000) bottom/calc(100% - 20px) 10px;
  background-repeat:no-repeat;

Puede considerar las variables CSS para ajustar fácilmente la forma:

.triangle 
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right/50% 100%,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left/50% 100%,
    /* bottom side*/
    linear-gradient(var(--c),var(--c)) bottom/calc(100% - 2*var(--t)) var(--t);
  background-repeat:no-repeat;


body 
 background:pink;

Una sintaxis diferente con menos gradiente:

.triangle 
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  border:var(--t) solid transparent;
  border-bottom-color:var(--c);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left;
  background-size:50% 100%;
  background-origin:border-box;
  background-repeat:no-repeat;


body 
 background:pink;

Puedes considerar la misma idea para crear un triángulo rectángulo:

.triangle 
  --t:10;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  border:calc(var(--t)*1px) solid transparent;
  border-image:
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50%) var(--t);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)*1px),
      transparent calc(50% + var(--t)*1px + 1px));
  background-origin:border-box;
  background-repeat:no-repeat;


body 
 background:pink;

si quieres un triángulo equilátero simplemente mantenga una relación entre el ancho y el alto usando el código inicial

.triangle 
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  display:inline-block;
  border:var(--t) solid transparent;
  border-bottom-color:var(--c);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left;
  background-size:50% 100%;
  background-origin:border-box;
  background-repeat:no-repeat;


.triangle:before 
  content:"";
  display:block;
  padding-top:86.6%;


body 
 background:pink;

Respuesta relacionada para obtener más detalles sobre el cálculo: ¿Cómo funcionan los triángulos CSS?

Recuerda que tienes el privilegio interpretar si te ayudó.

---

---

Utiliza Nuestro Buscador