CSS Remplacer la puce de liste avec Polygon Bullet personnalisé (évolutif)

Mon objectif final est de créer une balle qui peut être mise à l'échelle en fonction de la résolution de l'écran. Je sais que dans certains aspects de CSS, vous pouvez soit importer une grande image dans un conteneur qui peut être mis à l'échelle, soit utiliser des images de tailles multiples et afficher la bonne en fonction de la résolution de l'écran.CSS Remplacer la puce de liste avec Polygon Bullet personnalisé (évolutif)

Voici un exemple simple d'utilisation d'une image.

li { 
 
\t list-style-type: square; /* Default */ 
 
\t list-style-image: url("http://i.stack.imgur.com/gtv3o.jpg"); /* Custom */ 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <ul> 
 
    <li>This is a line item</li> 
 
    <li>This is a line item</li> 
 
    </ul> 
 
</body> 
 
</html>

Je ne suis pas sûr de la façon de contrôler la taille de la "liste-style-image" (à savoir l'échelle de l'image), qui serait préférable à l'utilisation de plusieurs images. Dans ce cas, disons que je voulais que l'image de 20x20 pixels soit de 10x10 pixels. Mon idéal cependant serait de créer un style de balle personnalisé avec l'attribut polygone en CSS, mais je ne sais pas comment l'implémenter ou s'il est supporté (car le polygone est relativement nouveau lui-même).

Voici un exemple de ce que je pensais. Le polygone utilisé est un hexagone à titre de référence.

li { 
 
\t list-style-type: none; 
 
} 
 
li:before { 
 
\t clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); 
 
\t -webkit-clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); 
 
\t 
 
\t background-color:rgba(255,0,0,1.00); 
 
\t width: 10px; 
 
\t height: 10px; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <ul> 
 
    <li>This is a line item</li> 
 
    <li>This is a line item</li> 
 
    </ul> 
 
</body> 
 
</html>

Source

2016-06-08 Josh Balsillie

Au lieu d'utiliser des images d'éléments de liste, vous pouvez utiliser des images d'arrière-plan. Si vous augmentez le em largeur/hauteur de l'image d'arrière-plan par 1, vous devez également augmenter le remplissage gauche du parent <li> par 1, de sorte que les choses évolueront également.

ul { 
 
    padding: 0; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    position: relative; 
 
    padding-left: 1.25em; 
 
} 
 

 
li:after { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    content: ''; 
 
    background: transparent url(http://i.stack.imgur.com/gtv3o.jpg) 0 50% no-repeat; 
 
    width: 1em; 
 
    height: 1em; 
 
    display: inline-block; 
 
    background-size: cover; 
 
}

<ul> 
 
    <li>This is a line item</li> 
 
    <li>This is a line item</li> 
 
    </ul>

Source

2016-06-08 23:25:50

Salut Andy, Merci pour le conseil! J'ai pensé à utiliser une image de fond, mais je n'ai pas pensé à changer la taille de l'image de fond: P –

Je me suis dit que c'était la pièce manquante :) –

CSS Remplacer la puce de liste avec Polygon Bullet personnalisé (évolutif)

Répondre

Questions connexes