J'essaie d'obtenir cette forme:
Jusqu'à présent, j'ai Ceci . Existe-t-il un moyen d'obtenir cet effet en utilisant CSS? Je pensais qu'un rayon négatif fonctionnerait probablement.
p>
<div>
Board
</div>5 Réponses :
J'aime des choses comme ça comme je plaisante toujours pour créer des choses comme ça. Alors voici comment je le ferais. Utilisation de faire le P> : avant code> et : après code> Nous pouvons créer cette forme, nous les utilisons pour créer une forme pour vous asseoir sur le div code> avec le même couleur comme arrière-plan. Cela fera ressembler à la forme que vous voulez. : avant code> et : après code> gros et plus petit pour obtenir la taille que vous souhaitez (changer la largeur et la hauteur). p>
<div>Board</div>
@ user3801433 qui aurait dû être changé, j'ai oublié de le faire, ce qui n'est pas nécessaire pour que cela fonctionne. Je l'ai réparé maintenant.
@ user3801433 frontière-rayon: 10% / 70%; est pour faire des ovales. 10% est un côté, 70% est l'autre côté
@RUDDY Toute façon d'y parvenir sans blob blanc? J'ai un fond de couleur non unique
+1 Vous m'avez battu et votre conseil est magnifique! :)
@Andrew Off the Haut de ma tête Je ne peux pas penser à une autre manière. J'aurai un gâchis quand j'aurai une chance et voir si je peux le créer sans les blobs.
<div id="a"></div><div id="b"></div><div id="c"></div>
C'est un snowboard étrange à la recherche: p
Admis, jamais utilisé un, celui ci-dessus semble mieux? Bettez mieux les miennes à la neige
Haha, c'est un skimboard, je pense.
quelque chose comme ça?
p>
<div id="board-cont">
<div class="border-top"></div>
<div class="border-bottom"></div>
<div class="board"></div>
</div>Comme je l'ai dit dans le commentaire, vous devez couper du bois du haut et du bas de la planche. @ Le conseil de Ruddy regarde beaucoup mieux cependant.
J'ai utilisé ces valeurs de rayon super-haute en raison de la façon dont ils sont actuellement mesurés sur des planches et des skis. En utilisant des spécifications de snowboard, vous pouvez réellement atteindre le look / forme identique. P>
C'est à peu près aussi loin que possible avec CSS uni (avec modifier les chiffres, bien sûr). p>
mais si vous en avez besoin pour être un objet semi-transparent à poser sur un arrière-plan (coloré) afin que vous ne puissiez pas utiliser l'effausse blanche, vous feriez mieux d'utiliser un canevas HTML et Un JS simple. p>
p>
<div>
Board
</div>La réalisation de cela dans CSS serait un processus long. Vous pouvez utiliser un SVG à la place:
p>
<svg height="150" width="500"> <ellipse style="fill:lime" ry="50" rx="109" cy="49" cx="220" /> <ellipse style="fill:white" ry="73" rx="270" cy="-51" cx="214" /> <ellipse style="fill:white" ry="73" rx="270" cy="151" cx="214" /> </svg>
Il vous suffit d'appliquer un énorme rayon "Easer" sur le dessus et au bas de celui-ci.
Toute façon d'y parvenir sans blob blanc? J'ai une image de fond
Pas vraiment. Je veux dire non seulement avec CSS seulement. Vous pouvez toujours placer le fond "Eraser" sur le dessus.
Il existe une manière ultra-complexe en utilisant des gradients pour le faire sans les zones blanches, mais ne méritez pas l'effort, il nécessitera beaucoup d'efforts pour en écrire un, puis de le faire correspondre à tous les navigateurs, etc., si le fond n'est pas une plaine couleur, je ne suggérerais pas CSS.
La méthode de gradient ressemblerait à (non la même chose que similaire) Réponse de Mikhail dans Ce fil .
Vous pouvez utiliser des pseudo-éléments avec
box-ombres et élément principal avecOverflow: caché; Cela permet de transparent les parties supérieure et inférieure. jsfiddle.net/w0nyb9wv