Inverser à coins arrondis en CSS?

J'ai un code css:

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

- Je obtenir le résultat:

Est-il possible de donner comme ceci:

Inverser à coins arrondis en CSS?

InformationsquelleAutor Mubeen | 2010-10-25

Juste de mettre à jour le présent, il semble que vous pouvez dans de multiples façons.

Lea Verou posté une solution

Voici la mienne avec border-image

À l'aide de la frontière de l'image

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;   
}

À l'aide d'un dégradé radial

Lea Verou de la solution

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);
}

Une méthode supplémentaire, à nouveau à partir de Lea Verou. lea.verou.moi/2011/08/mieux-css3-billet-comme-les balises

InformationsquelleAutor Chris Burton

16

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

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

En outre, prendre un coup d'oeil à http://www.html5rocks.com/en/tutorials/masking/adobe/, qui explique comment obtenir le même résultat à l'aide de mask-box-image.
- Merci beaucoup pour ce dégradé radial - j'étais en utilisant l'un qui n'était pas parfait, mais maintenant, je suis en mesure de réaliser ce que j'essayais de faire! Prendre un coup d'oeil, il s'est avéré assez cool 🙂 jsfiddle.net/emilbroll/dgtceno3/3
- Tout Simplement Génial!
InformationsquelleAutor Gajus

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

CSS:

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}

HTML:

<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 courbe de bézier cubique pour l'inversion de la pointe ronde.

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

CSS:

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}

HTML:

<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>

J'ai utilisé ce en faveur de fond à base de solutions qu'il approvisionne pour l'impression aussi. Une belle.

InformationsquelleAutor web-tiki

5

Malheureusement, il n'existe actuellement pas une solution basée sur l'officiel ou mis en œuvre des Spécifications CSS 🙁

Cependant, comme d'autres personnes ont ajouté, il y a des solutions possibles (ou astuces?) vous pouvez faire pour obtenir le même effet en utilisant les librairies JS ou complexe HTML/CSS implémentations. Je suis tombé sur cette question alors que vous cherchez un moyen de rendre encore plus complexe coins de l'OP sans l'aide d'images.

J'ai déposé un bug (Demande de Fonctionnalité) à la webkit site - comme il ne semble pas être l'un déposé déjà.

Bug 62458 - Demande de Fonctionnalité: l'Inverse des coins arrondis

InformationsquelleAutor Christopher Bull
5

Pour un fond uni de couleur, vous pouvez, à l'aide de pseudo-élément et de la zone d'ombre de tirage couleur d'arrière-plan au lieu de cela, et il ne sera pas masquer les origines de parent conteneur, vous fait voir au travers de.

Ce que vous avez besoin est un navigateur qui comprend :avant:après et box-shadow 🙂 ...

Pour IE8 , vous pouvez dessiner un énorme frontières au lieu des ombres. http://codepen.io/anon/pen/fFgDo

box-shadow approche : http://codepen.io/anon/pen/FwLnd
```
div {
  margin:2em; /* keep it away from sides to see result */
  padding:2em;/* for test to size it when empty */
  position:relative; /* reference to set pseudo element where you wish */
  overflow:hidden;/* you do not want the box-shadow all over the page */
}
div:before {
  content:'';
  position:absolute;
  width:80px;
  height:80px;
  top:-40px;
  left:-40px;
  border-radius:100%;
  box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */
}
```
pseudo-élément peut prendre n'importe quelle forme, et de se transformer, par la css et de l'ensemble n'importe où dans son élément à dessiner des sortes de trous à travers : exemples : http://codepen.io/gc-nomade/pen/nKAka

InformationsquelleAutor G-Cyr

Cela peut être fait avec un dégradé radial.

CSS:

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

HTML:

<div></div>

Juste pour le fun, d'autres inversé les coins peuvent être ajoutés par la définition de plusieurs milieux différents - un pour chaque coin de rue:

CSS:

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;
}

HTML:

<div></div>

InformationsquelleAutor Danield

1

Il ya des façons que vous pouvez résoudre ce problème en utilisant les feuilles de style CSS toutefois, cela dépend de la couleur de votre arrière-plan (si solide, il est plus facile) si vous avez un motif d'arrière-plan, il pourrait être un peu plus complexe.

Je couvre d'un exemple de base ici de la façon de faire un Inverse Rayon des Frontières dans le CSS (ici). Il utilise un truc avec la taille de la Frontière pour une utilisation à l'intérieur, vous pourriez avoir à faire quelques positionnement de l'obtenir pour fonctionner correctement cependant comme vous pouvez le voir son possible. Surtout si vous spécifiez un background-color pour chaque span.

Si vous voulez que tous les 4 coins, vous devrez ajouter une catégorie distincte pour chaque span à l'intérieur de votre div, et chaque classe permettrait de simuler un coin, en haut à gauche, en haut à droite etc.

InformationsquelleAutor Jon Mifsud
0

Pas.
Si vous avez arrière-plan solide vous pouvez probablement utiliser css pour créer la morsure.

Sinon, il n'y a pas quelque chose de spécial, vous pouvez le faire au-delà de l'aide de Png, beaucoup comme vous le feriez pour créer des coins arrondis avant border-radius.

InformationsquelleAutor 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 @Dominique dit que vous aurez besoin d'un solide arrière-plan, sinon, vous allez obtenir 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>

InformationsquelleAutor Milox

0

Il peut être fait à l'aide après l'élément.
cochez cette jsfiddle lienenter code here
- .box{width:100px;height:100px;background:#1D005D;position:relative;overflow:hidden;} .boîte:après{background: #fff none repeat scroll 0 0; border-radius: 20px; content: ""; display: block; height: 20px; left: -5px; position: absolute; top: -5px; width: 20px;} </style>
InformationsquelleAutor Omkar Vaity
-4

Non, il ne l'est pas.
- Cette réponse ressemble un peu à l'excès, tandis que d'autres ont posté un grand nombre de façons d'atteindre cette forme. 🙂
InformationsquelleAutor Domenic

Vous devez vous connecter pour publier un commentaire.