How to make irregular figures

Question

How to make irregular figures

Navigation

#1 by (2 votes)

2

What I want to do is an isosceles triangle with the tips cut out or flat in this case will have 6 points as a hexagon, but I do not know how this can be done from CSS.

I tried something like this:

.triangulo_mascara{
  overflow: hidden;
  width: 3.4em;
  height: 4em;
  font-size: 35px; /*Con esto controlo el tamaño*/
  margin: 0.5em;
}

.triangulo{
  display: inline-block;
  border-style: solid;
  border-color: transparent transparent crimson;
  border-width: 0 2em 5em 2em;
  margin: -1em 0 0 -.3em;
}

.demo_sin_mascara{
  margin: 1em 0 0 1em;
  border: solid ;
  overflow: initial; 
}

.demo_sin_mascara .triangulo{
  opacity: .8;
}

Así voy
<div class="triangulo_mascara">
  <span class="triangulo"></span>
</div>
Como hice esta versión del triangulo
<div class="triangulo_mascara demo_sin_mascara">
  <span class="triangulo"></span>
</div>

Although the tips below should be flat like a diagonal hexagon.

css

asked by Jorge Gutierrez Yañez 23.08.2018 в 20:27

source

1 answer

Vary the color of a range Bring related data from a table

score 2 · Accepted Answer

If you want the hexagon to be editable on the inside, I suggest you do it with clip-path . It is used like this:

.triangulo{
  clip-path: polygon(x1 y2, x2 y2, x3 y3, x4 y4, x5 y5, xN yN);
}

Look:

.forma{
  width: 10em;
  height: 10em;
  background-color: darkcyan;
}

.triangulo{
  clip-path: polygon(42% 0%, 58% 0%, 100% 88%, 92% 100%, 8% 100%, 0% 88%)
}

<div class="forma triangulo"></div>

Now the following is not necessary, but it simplifies a bit the editing of everything, you are free to use or not this option:

.forma{
  width: 10em;
  height: 10em;
  background-color: darkcyan;
}

.triangulo{
  /*Solo debes editar esta linea y ya*/
  --anchura_esquina: 20px;
  /*Lo que viene no se toca*/
  --x: calc(var(--anchura_esquina) / 0.6);
  --xy1: calc(50% - var(--anchura_esquina));
  --xy2: calc(50% + var(--anchura_esquina));
  --xy3: calc(100% - var(--x));
  --xy4: calc(100% - var(--x));
  --xy5: calc(0% + var(--x));
  --xy6: calc(100% - var(--x));
  clip-path: 
    polygon( 
      var(--xy1) 0,
      var(--xy2) 0,
      100% var(--xy3), 
      var(--xy4) 100%,
      var(--xy5) 100%,
      0 var(--xy6) 
    );
}

<div class="forma triangulo"></div>

Update

This masking option does not have the possibility of adding normal shadows or borders, although you can simulate them by adding a parent container and using the shadows generated by filters:

.forma{
  width: 10em;
  height: 10em;
  background-color: white;
}

.triangulo{
  clip-path: polygon(42% 0%, 58% 0%, 100% 88%, 92% 100%, 8% 100%, 0% 88%)
}

.contenedor_forma{
  display: inline-block;
  filter: 
    drop-shadow(2px 0 0 red) 
    drop-shadow(0 2px 0 red) 
    drop-shadow(-1px 0 0 red) 
    drop-shadow(0 -1px 0 red)
    drop-shadow(3px 0 0 blue) 
    drop-shadow(0 3px 0 blue) 
    drop-shadow(-2px 0 0 blue) 
    drop-shadow(0 -2px 0 blue) 
    drop-shadow(5px 5px 5px black);
}

<div class="contenedor_forma">
 <div class="forma triangulo"></div>
</div>