web-dev-qa-db-fra.com

Faire des bordures triangulaires en dents de scie en CSS

J'ai une forme avec un bord comme celui-ci dans Photoshop:

image

Est-il possible de faire les triangles répétés comme une frontière avec CSS?

csscss3css-shapes
17
svbnet

Vous pouvez utiliser les dégradés CSS3 pour créer un arrière-plan à motifs en zig-zag. Utilisez le pseudo after css pour l’appliquer comme une bordure.

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;
    }

Source: CSS Zigzag Border avec un fond texturé

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

34
extramaster

Pour les futurs téléspectateurs, j’ai trouvé cette adaptation de la réponse de @ extramaster un peu plus simple. 

C'est essentiellement la même chose, mais il utilise un moins de dégradés d'arrière-plan et permet à l'objet de support (.navbar dans mon balisage) de s'afficher au lieu de coder en dur la deuxième couleur dans le 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 */
}
11
mxdubois

Vous pouvez créer un triangle individuel en utilisant CSS assez facilement (il suffit de modifier les propriétés de la bordure). Pour que cela fonctionne, vous devrez générer vous-même un peu de balisage. Je recommanderais contre cette approche.

Il vaut mieux utiliser une image individuelle contenant un seul triangle (de préférence un fichier .png transparent), puis utiliser les propriétés background-image et background-repeat (repeat-x) pour les lier à un div (votre "bordure").

Malheureusement, il n'y a pas encore de solution simple pour y parvenir en utilisant du CSS pur.

1
Juho Vepsäläinen

Il existe une propriété border-image dans CSS3 . Vous pouvez peut-être résoudre le problème comme vous le souhaitez. Plus ici http://www.w3schools.com/cssref/css3_pr_border-image.asp

1
marinbgd

Personnellement, je pense que clip-path est plus facile à utiliser/comprendre que les dégradés de fond complexes.

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>

0
Daniel Fowler