web-dev-qa-db-fra.com

Encart frontière-rayon avec CSS3

Est-il possible de créer un rayon de bordure incrusté avec css3? (Sans images)

J'ai besoin d'un rayon comme celui-ci:

Inset border radius

csscss3css-shapes
28
Serhiy

Le meilleur moyen que j’ai trouvé d’y parvenir avec tous les CSS et HTML (pas d’image, etc.) est de en utilisant des dégradés CSS3 , par Lea Verou. De sa solution:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

Le résultat net est un ensemble de gradients transparents avec des courbes. Voir l'intégralité de JSFiddle pour une démonstration et pour jouer avec son apparence.

Évidemment, cela dépend du support de rgba et gradient, et doit donc être traité comme une amélioration progressive. Sinon, vous devez fournir un repli basé sur une image pour les navigateurs plus anciens (notamment IE, qui ne prend pas en charge gradient jusqu’à IE9).

32
Chris Krycho

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 plages, des ombres de boîte, des bordures et des pseudo-sélecteurs.

Découvrez mon exemple .

Voici le code HTML et 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>

11
Brett Hayes

Je ne pense pas que ce serait possible si les coins devaient être transparents, mais si l’arrière-plan est connu, vous pouvez créer une div dans chaque coin avec une bordure arrondie. Si ces divs ont 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>

5
John Lawrence

Cela ne semble pas être possible. J'ai essayé un bord-rayon avec une valeur négative pour voir ce qui allait se passer, mais cela n'a eu aucun effet.

Modifier:

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

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

2
Matt Coughlin

Vous pouvez obtenir cet effet avec les nouvelles images css3-Border (ainsi, ce sont des images, mais elles s’échelonnent sans problème). Mais ceci est tout à fait nouveau et pas encore très largement supporté (enfin, dans tous les navigateurs convenables (avec des préfixes), sauf IE pour être précis;)).

Un bel article sur les images de frontière sur csstricks .

Support du navigateur

2
Christoph

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/

1
Davinder Singh

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>

0
user8696825

Hmm, vous pouvez éventuellement utiliser ce petit truc ici pour créer Encart Border Radius

Ensuite, pour assurer la transparence, vous devrez probablement ajouter d’autres blocs entre les deux. Plus ou moins comme les anciennes images arrondies; 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.

0
Jon Mifsud