web-dev-qa-db-fra.com

Inverser les coins arrondis en CSS?

J'ai un code css:

-moz-border-radius-topleft:50px;

Je reçois le résultat:

rounded corner

Y a-t-il des possibilités à donner comme ceci:

inverted rounded corner

csscss3svgbordercss-shapes
27
Mubeen

Juste pour mettre à jour cela, il semble que vous puissiez le faire de plusieurs manières.

Lea Verou a posté une solution

Voici le mien en utilisant border-image

Utiliser une image de bordure

html

<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>

css

div {
    width: 200px;           
    border-width: 55px;
    -moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    margin: 50px auto;   
}

Utiliser le dégradé radial

La solution de Lea Verou

html

<div class="inner-round"></div>

css

.inner-round {
    background-image:
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}
17
Chris Burton

Dans les navigateurs modernes, vous pouvez utiliser mask-image:

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}
<div id="aux-container"></div>

http://jsbin.com/eViJexO/1/

De plus, consultez http://www.html5rocks.com/fr/tutorials/masking/Adobe/ , qui explique comment obtenir un résultat similaire à l'aide de mask-box-image.

16
Gajus

Vous pouvez également utiliser et inline svg avec un élément path :

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 10">
  <path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>

Dans cet exemple, j'utilise un cubic bezier curve pour le contour arrondi.

Avec cette approche, vous pouvez aussi remplir la forme avec une image ou un dégradé:

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="clip">
      <path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>

7
web-tiki

Malheureusement, il n’existe actuellement aucune solution basée sur les spécifications CSS officielles ou implémentées :(

Cependant, comme d'autres personnes l'ont ajouté, il existe des solutions possibles (ou des astuces?) Que vous pouvez utiliser pour obtenir le même effet en utilisant des bibliothèques JS ou des implémentations complexes HTML/CSS. Je suis tombé sur ce problème en cherchant un moyen de créer des angles encore plus complexes que le PO sans utiliser d'images.

J'ai déposé un bogue (demande de fonctionnalité) sur le site Webkit - car il ne semble pas qu'il en existe déjà un.

Bug 62458 - Demande de fonctionnalité: Coins arrondis inversés

5
Christopher Bull

Vous pouvez résoudre ce problème en utilisant uniquement du CSS. Toutefois, cela dépend de la couleur de votre arrière-plan (s'il est plus facile, plus solide) si vous avez un motif pour l'arrière-plan, il est peut-être un peu plus complexe.

Je couvre ici un exemple de base sur la création d’un rayon Inverse Border en rayon CSS (ici) . Cela utilise une astuce avec la taille de Border pour utiliser l'intérieur, vous devrez peut-être faire un certain positionnement pour que cela fonctionne correctement, mais vous pouvez voir que c'est possible. Surtout si vous spécifiez un background-color pour chaque span.

Si vous voulez les 4 coins, vous devrez ajouter une classe distincte pour chaque span de votre div, et chaque classe simulera un coin, en haut à gauche, en haut à droite, etc.

1
Jon Mifsud

Cela peut être fait avec un gradient radial .

div {
  width: 20vw;
  height: 20vw;
  background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}
<div></div>

Juste pour le plaisir, des coins inversés supplémentaires peuvent être ajoutés en définissant plusieurs arrière-plans - un pour chaque coin:

div {
  width: 40vw;
  height: 40vw;
  position: relative;
  background-color: darkblue;
  --circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: var(--circle), var(--circle), var(--circle), var(--circle);
  background-size: 18vw 18vw;
  background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
  background-repeat: no-repeat;
}
<div></div>

1
Danield

N ° Si vous avez fond solide vous pouvez probablement utiliser CSS pour créer la morsure.
Sinon, rien de spécial ne peut être fait au-delà de l’utilisation des PNG, comme si vous créiez des angles arrondis avant border-radius.

0
Kobi

en fait, il y a un moyen, comme ceci:

<div style="background-color: red;height: 12px; width: 12px;">
    <div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
        -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
    </div>
</div>

mais comme @Domenic dit qu'il vous faut un fond solide, sinon vous obtiendrez ceci:

<div style=" background-color:#666">
  <div style="background-color: red;height: 12px; width: 12px;">
    <div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
        -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
    </div>
</div>

0
Milox

Cela peut être fait en utilisant after element . vérifier ce lien jsfiddleenter code here

0
Omkar Vaity