Comment puis-je créer cette bordure de forme irrégulière avec du CSS pur (pas d'images)?

12

J'essaie d'éviter d'utiliser une image d'arrière-plan (ou toute solution basée sur une image) pour créer efficacement ceci:

bordure irrégulière

Remarque: la flèche rouge pointe juste vers la bordure en question. La flèche ne doit pas être incluse dans votre réponse.

Comment puis-je créer cette bordure de forme irrégulière avec du CSS pur (pas d'images)? Si les images sont inévitables, la réponse la plus concise et lisible sera votée et acceptée.

css borders Micah Bolen
la source

Réponses:

12

Vous pouvez utiliser CSS (en gardant à l'esprit que cela ne fonctionnera pas avec les anciennes versions d'IE).

Par exemple, vous pouvez combiner certaines formes comme un rectangle et deux triangles. Voir ce jsfiddle .

entrez la description de l'image ici

HTML:

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

Et le CSS:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

Vous pouvez voir une variété de formes CSS ici . La plupart sinon la totalité nécessitent plus d'une division, le défi serait donc d'appliquer une bordure plus foncée.

Yisela
la source
Existe-t-il un moyen de le faire lorsque le polygone utilise une largeur basée sur un pourcentage?
Micah Bolen
En utilisant l'approche de Yisela, vous pouvez créer le triangle avec un div (bordure gauche et bordure droite avec la moitié de la largeur du carré; la bordure supérieure = hauteur souhaitée; et ajouter une marge supérieure de (-1 * bordure supérieure) Vous auriez besoin d'ajouter une valeur de remplissage au carré pour empêcher le texte de chevaucher le triangle.
horatio
2
Vous pouvez mettre ces formes supplémentaires en pseudo-éléments :beforeet :aftergarder votre html«propre». Ce :beforeserait le triangle de gauche, :afterle bon.
Vincent
7

La réponse de Yisela est solide, mais j'ai pensé proposer cette alternative: utiliser un polygone ou un URI d'image avec des formes CSS et un chemin de clip. Voici un petit tutoriel .

Notez que cette méthode fonctionnera avec encore moins de navigateurs que l'astuce de bordure en triangle pour le moment. Cependant, si vous souhaitez utiliser une forme plus complexe ou envelopper votre texte dans la forme, ce sera la voie à suivre.

capture d'écran de démonstration

Joey Cordes
la source
Il semble que cette solution fonctionnerait même si j'avais besoin du polygone pour utiliser une largeur basée sur un pourcentage. Peut-être, au moyen de l' vwunité CSS . Est-ce que cela semble possible?
Micah Bolen
2

Une autre méthode pour cela qui peut également avoir un support limité est "SVG intégré dans CSS". Je n'ai pas essayé cela moi-même mais l'idée est que vous fournissez une ressource d'image sous forme d'URL dans la déclaration CSS de l'objet et que vous lui transmettiez une URL correctement échappée qui contient les données.

SVG est un format texte brut / xml. Un exemple de polygone (de w3schools ):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Un exemple de SVG en ligne (intégré) (simplifié) (à partir de stackoverflow ):

url("data:image/svg+xml;utf8, <svg></svg>");

Notez que les données SVG doivent être "échappées" correctement pour une utilisation en ligne, ce qui les rend légèrement moins attrayantes que la simple liaison d'un fichier SVG.

Il y a une discussion concernant la viabilité de la méthode dans le thread lié ci-dessus. Je pense qu'intégrer quelque chose d'aussi simple qu'un triangle rempli de blanc est une décision facile à condition que le soutien soit là. Les données au format SVG complexes doivent être stockées dans un fichier SVG plutôt qu'en ligne.

Les fichiers SVG sont vectoriels et peuvent être mis à l'échelle en pourcentage, contrairement à la méthode des «bordures». Ils ont également (actuellement) une meilleure prise en charge (au moins en ligne) que la méthode du chemin de détourage répertoriée. SVG, étant du texte brut, peut même être émis à la volée en utilisant par exemple PHP ou d'autres scripts côté serveur.

horatio
la source
0

Si votre zone bleue sur l'image est un png transparent et que la zone blanche est transparente, vous devez inclure ce code html pour lui faire des ombres:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

Et utilisez ce css sur l'image:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

Il s'agit d'une solution parfaitement multi-navigateur.

bogatyrjov
la source