Articles of formes css

CSS 3 Forme: «Cercle inverse» ou «Cercle coupé»

Je veux créer une forme que je décrirais comme “cercle inverse”: L’image est en quelque sorte inexacte, car la ligne noire devrait continuer le long de la bordure extérieure de l’élément div. Voici une démo de ce que j’ai en ce moment: http://jsfiddle.net/n9fTF/ Est-ce même possible avec CSS sans images?

Comment obtenir un effet de papier déchiré avec des dents de scie aléatoires?

J’essaie de faire un effet de papier déchiré comme l’image ci-dessous: avec l’effet déchiré sur le côté inférieur. J’ai vu cela et j’ai pu faire un effet de papier déchiré comme indiqué ci-dessous .box { width: 300px; height: 150px; background: darkred; position: relative; display: inline-block; } .box:after { position: absolute; content: “”; width: 15px; height: […]

Est-il possible de créer cette forme (deux cercles partiels réunis) avec CSS?

J’essayais d’accomplir cette frontière pour deux div avec CSS: J’ai essayé d’utiliser simplement border-radius , mais les deux cercles partiels ne sont pas pressés ensemble: http://jsfiddle.net/uwz6L79w/ .left { position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-width: 4px; border-color: black white black black; border-style: solid; border-radius: 60px } .right { position: absolute; left: […]

Comment segmenter un cercle avec des couleurs différentes en utilisant CSS

Je veux pouvoir dessiner un cercle avec un segment d’une autre couleur, je voudrais que la quantité d’un segment couvert puisse être augmentée par incréments de 10% de 0% à 100% . Tous les exemples sur Google sont tous des secteurs et non des segments. Jusqu’à présent, c’est le meilleur que j’ai pu trouver: div.outerClass […]

Demi-cercle avec CSS (bordure, contour uniquement)

J’essaie de créer un cercle avec CSS, qui ressemble exactement à l’image suivante: … avec un seul div : et en utilisant uniquement des définitions CSS . Aucun SVG, WebGL, DirectX, […] autorisé. J’ai essayé de dessiner un cercle complet et d’en réduire la moitié avec une autre div , et ça marche, mais je […]

Comment créer une flèche ronde avec uniquement HTML et CSS?

J’essaie de créer une flèche directionnelle avec CSS et HTML. Ci-dessous mes tentatives. Tentative 1 En cela, j’ai fait pivoter le et une flèche, mais les deux sont dans des positions différentes. Ceci est le CSS: #curves div { width: 100px; height: 100px; border: 5px solid #999; } #curves.width div { border-color: transparent transparent transparent […]

Triangle central en bas de la division

J’essaie d’avoir un sortingangle / flèche au bas de mon héros mais il n’est pas réactif et ne fonctionne pas très bien sur le mobile car le sortingangle flotte à droite et n’est plus absolument centré. Comment pourrais-je garder le sortingangle positionné dans le centre absolu au bas du div en tout temps? Exemple de […]

Flèche / sortingangle transparent en retrait

Je voudrais faire une flèche transparente sur une image . Ce sortingangle doit être en retrait dans un bloc semi-transparent et afficher l’image d’arrière-plan. Sortie désirée: .barShow { background-color: #000; opacity: 0.5; } .barShow:before { top: 0%; left: 50%; border: solid transparent; content: ” “; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: #999; […]

Couper les coins en utilisant CSS

Je cherche à “couper” le coin supérieur gauche d’un div, comme si vous aviez plié le coin d’une page. Je voudrais le faire en CSS pur, existe-t-il des méthodes?

Comment incliner un élément mais garder le texte normal (non noté)

Est-il possible de reproduire cette image en utilisant uniquement CSS? Je veux l’appliquer à mon menu, de sorte que le fond brun apparaisse sur l’instance de hover Je ne sais pas comment faire ça, j’ai seulement; .menu li a:hover{ display:block; background:#1a0000; padding:6px 4px; }