CSS: Comment arrondir les coins de la boîte à l'intérieur?

Il y a border-radius propriété pour arrondir les coins de la boîte. Mais comment arrondir les coins à l'intérieur du bloc, comme soustraire un cercle?CSS: Comment arrondir les coins de la boîte à l'intérieur?

Comme ici: http://malsup.com/jquery/corner/

paramètres Curl

Source

2013-08-29 Artem E

sa 'frontière radius' –

Je Je ne suis pas sûr de ce que vous entendez par "bloc intérieur" et "cercle de soustraction". Voici un exemple utilisant 'border-radius' pour donner à un' div' un aspect de cercle: http://jsfiddle.net/39N9V/ – showdev

@showdev: Il veut dire qu'il veut que les coins s'incurvent vers l'intérieur, et non vers l'extérieur. Pensez à un rayon de frontière négatif, seulement je doute que quelque chose comme ça existe. –

Cela peut être fait en ajoutant quatre images de fond circulaires « gradient » au-dessus de l'image d'arrière-plan normale, placés chacun à l'angle approprié. Il y a un exemple on Lea Verou's blog. De cela, j'ai extrait un JSFiddle; le code de clé est

.round { 
    background: 
     radial-gradient(circle at 0 100%, 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 100% 0, rgba(204,0,0,0) 14px, #c00 15px), 
     radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px); 

    background-position: bottom left, bottom right, top right, top left; 
    background-size: 50% 50%; 
    background-repeat: no-repeat; 

    padding: 14px; 
}

Source

2013-08-29 18:24:18 Domenic

Vous me battre à l'horloge! Juste pour ajouter une note sur la prochaine norme W3C 'border-corner-shape' http://lea.verou.me/2013/03/preview-border-corner-shape-before-implementations/ –

Variante, mais j'ai besoin de la plupart des croix solution -browser –

Comment cela fonctionnerait-il sur les entrées? –

Non, il n'y a pas moyen de le faire avec du CSS pur pour autant que je sache. Ce n'est même pas simple de le faire avec JavaScript ou jQuery. Pour autant que je sache, le plugin jQuery que vous avez lié est celui qui vous convient le mieux, d'autant plus que vous voulez une solution cross-browser, dont le CSS3 avancé n'est pas encore là, et c'est celui que vous devriez utilisation.

Source

2013-08-29 18:25:29

Merci, je voulais juste savoir si existe une bonne façon de faire de telles choses. Sachez que je connais certaines façons de le faire avec deux div avec bordure-radius et avec superposition de gradient et avec js –

@ArtemE: La bonne façon est la réponse de Domenic, et l'enfer avec IE. –

Voir la solution CSS ci-dessous posté – Rijul

Il y a une façon de le faire avec CSS pur:

code CSS:

div { 
height: 200px; 
background: red; 
position: relative; 
width:200px; 
} 

div:after { 
content: ''; 
position: absolute; 
top: -20px; right: -20px; 
border-top: 50px solid white; 
border-left: 50px solid white; 
width: 0; 
background:#fff; 
    border-radius:100px; 

} 
div:before { 
content: ''; 
position: absolute; 
top: -20px; left: -20px; 
border-top: 50px solid white; 
border-left: 50px solid white; 
width: 0; 
background:#fff; 
    border-radius:100px; 

}

HTML: <div></div>

Here is an example:

Source

2013-08-29 21:56:43 Rijul

Oui, cela peut être une solution de plus. Cordialement –

CSS: Comment arrondir les coins de la boîte à l'intérieur?

Répondre

Questions connexes