Encart border-radius avec CSS3

Vous pouvez y parvenir en plaçant absolument des éléments de cercle transparents dans les coins avec des ombres de boîte. J'ai utilisé une combinaison de divs débordés cachés contenant des travées, des ombres de boîte, des bordures et des pseudo-sélecteurs.

Découvrez mon exemple.

C'est le HTML et le CSS de base dont vous avez besoin pour commencer:

a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;}

a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;}
a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;}

a div:first-of-type {left: -14px;}
a div:first-of-type:after {left:0;}

a div:last-of-type {right: -14px;}
a div:last-of-type:after {right:0;}

a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;}

a div:first-of-type span {left:-20px;}
a div:first-of-type span:first-child {top:-20px;}
a div:first-of-type span:last-child {bottom:-20px;}

a div:last-of-type span {right:-20px;}
a div:last-of-type span:first-child {top:-20px;}
a div:last-of-type span:last-child {bottom:-20px;}

<a href="">
    <div>
        <span></span>
        <span></span>
    </div>

    <div>
        <span></span>
        <span></span>
    </div>
</a>

Je ne pense pas que ce serait possible si les coins doivent être transparents, cependant si l'arrière-plan est connu, vous pouvez créer un div dans chaque coin avec une bordure arrondie. Si ces divs reçoivent alors la même couleur d'arrière-plan que l'arrière-plan de la page, l'effet fonctionnera.

Voir mon exemple ici http://jsfiddle.net/TdDtX/

#box {
    position: relative;
    margin: 30px;
    width: 200px;
    height: 100px;
    background: #ccc;
    border: 1px solid #333;
}

.corner {
    position: absolute;
    height: 10px;
    width: 10px;
    border: 1px solid #333;
    background-color: #fff;
}

.top-left {
    top: -1px;
    left: -1px;
    border-radius: 0 0 100% 0;
    border-width: 0 1px 1px 0;
}

.top-right {
    top: -1px;
    left: 190px;
    border-radius: 0 0 0 100%;
    border-width: 0 0 1px 1px;
}

.bottom-left {
    top: 90px;
    left: -1px;
    border-radius: 0 100% 0 0;
    border-width: 1px 1px 0 0;
}

.bottom-right {
    top: 90px;
    left: 190px;
    border-radius: 100% 0 0 0;
    border-width: 1px 0 0 1px;
}

<div id="box">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
</div>

Vous pouvez obtenir cet effet avec le nouveau CSS3-Border-images (Eh bien, ce sont des images, mais il évolue sans problèmes). Mais c'est assez nouveau et pas encore très largement supporté (bien dans tous les navigateurs décents (avec des préfixes) sauf IE pour être précis;) ).

Un bel article sur les images de bordure sur csstricks .

Prise En Charge Du Navigateur

Il ne semble pas que ce soit possible. J'ai essayé un border-radius avec une valeur négative juste pour voir ce qui se passerait mais cela n'a eu aucun effet.

Modifier:

Même si vous cassez la boîte en parties plus petites, à un moment donné, vous devrez toujours créer un coin encart transparent. La transparence est la partie délicate qui pourrait empêcher cela d'être possible sans images. Fondamentalement, vous devriez être capable de rendre un cercle transparent avec un bg environnant non transparent (et si c'est possible en CSS, j'aimerais savoir comment :)

Si vous n'avez pas besoin de transparence, il existe des moyens de le faire.

body {
    background: #fff;
}

.div{
 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}

<div class="div">
<div class="box"></div>
</div>

</body>
</html>

Exemple: http://jsfiddle.net/dVmX3/

Hmm vous pourriez éventuellement utiliser cette petite astuce ici pour créer rayon de bordure en médaillon

, Puis à favoriser la transparence, vous devrez probablement ajouter d'autres blocs entre les deux. Plus ou moins comme la façon dont les anciennes images arrondies étaient faites; avoir une portée pour chaque coin avec l'image transparente. Et s'étend sur les côtés et le haut pour remplir l'espace vide. Au lieu d'utiliser des images vous pouvez utiliser cette astuce pour le faire en CSS.

body {
    background: #fff;
}

.div{
 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}

<div class="div">
<div class="box"></div>
</div>

</body>
</html>