triangulo - poligono css

Haciendo borde de triángulo irregular en CSS

Question

Tengo una forma con un borde como este en Photoshop:

¿Es posible hacer los triángulos repetidos como un borde con CSS?

Answer 1

Hay una propiedad de imagen de borde en CSS3. Tal vez puedas resolverlo de la manera que quieras. Más aquí http://www.w3schools.com/cssref/css3_pr_border-image.asp

Answer 2

Para futuros espectadores, encontré que esta adaptación de la respuesta de @ extramaster es un poco más simple.

Es esencialmente lo mismo, pero usa menos gradientes de fondo y permite que el objeto de respaldo ( .navbar en mi .navbar ) se muestre en lugar de codificar el segundo color en el zig-zag.

JsFiddle: http://jsfiddle.net/861gjx0b/2/

html:

<div class="header"><h1>This is a header</h1></div>
<nav class="navbar"></nav>

css:

.header{
      position:relative;
      color:white;
      background-color:#2B3A48;
      text-align:center;
}

.navbar {
      background: #272220;
      height:20px;
}    

.header:after {
  content: "";
  position: absolute;      
  display: block;

  height: 10px;
  bottom: -10px; /* -height */
  left:0;
  right:0;

  /* TODO Add browser prefixes */
  background:
    linear-gradient(
      45deg, transparent 33.333%,
      #2B3A48 33.333%, #2B3A48 66.667%,
      transparent 66.667%
    ),linear-gradient(
      -45deg, transparent 33.333%,
      #2B3A48 33.333%, #2B3A48 66.667%,
      transparent 66.667%
    );

    background-size: 8px 20px; /* toothSize doubleHeight */
    background-position: 0 -10px; /* horizontalOffset -height */
}

Answer 3

Personalmente, creo que es más fácil trabajar con / entender el clip-path que los gradientes de fondo complejos.

body {
  font-family:Roboto,''Open Sans'',Helvetica,sans-serif;
}
.container {
  background:#ddd;
  margin:0 auto; 
  max-width:800px;
  padding:30px;
}
h1:first-child {margin:0;}

.jagged-bottom {
  position:relative;
}
.jagged-bottom:after {
    background:#ddd;
    content:"";
    height:2vw;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    clip-path:polygon(
       0 0, 2.5% 100%, 5% 0,  7.5% 100%, 
     10% 0,12.5% 100%,15% 0, 17.5% 100%, 
     20% 0,22.5% 100%,25% 0, 27.5% 100%, 
     30% 0,32.5% 100%,35% 0, 37.5% 100%, 
     40% 0,42.5% 100%,45% 0, 47.5% 100%, 
     50% 0,52.5% 100%,55% 0, 57.5% 100%, 
     60% 0,62.5% 100%,65% 0, 67.5% 100%, 
     70% 0,72.5% 100%,75% 0, 77.5% 100%, 
     80% 0,82.5% 100%,85% 0, 87.5% 100%, 
     90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
  }
}

<div class="container jagged-bottom">
  <h1>Looks Like A Receipt</h1>
  <p>Simply adjust the clip path on the pseudo-element if you want more or fewer spikes, and the height if you want them to be taller or shorter.</p>
</div>

Answer 4

Puede crear un triángulo individual usando CSS con bastante facilidad (solo ajustar las propiedades de los bordes). Para que esto funcione, necesitarás generar un poco de marcado tú mismo. Yo recomendaría contra este enfoque.

En su lugar, es probable que esté mejor usando una imagen individual que contenga un solo triángulo (preferiblemente un .png transparente) y luego use las propiedades de background-image background-repeat ( repeat-x ) para vincular eso a un div (su "borde").

Desafortunadamente, todavía no hay una manera directa de lograrlo utilizando CSS puro.

Answer 5

Puede usar gradientes css3 para crear un fondo con zig-zag, use el pseudo css after para aplicarlo como un borde.

HTML:

<div class="header"><h1>This is a header</h1></div>

CSS:

.header{
color:white;
background-color:#2B3A48;
text-align:center;
}
.header:after {
content: " ";
    display:block;
    position: relative;
top:0px;left:0px;
    width:100%;
    height:36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
    }

Fuente: CSS Zigzag Border con un fondo texturizado

JSFiddle: http://jsfiddle.net/kA4zK/