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?
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: […]
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: […]
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 […]
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 […]
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 […]
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 […]
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; […]
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?
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; }