Border arrondies intérieures

**Neewd** · 13/12/2013, 13h56

Bonjour, j'aimerais faire une bordure arrondies non pas vers l'extérieur mais vers l'intérieur, comme sur cette image.

J'ai donc mis un pseudo-élément :before , mais je coince au moment du ber-radius car j'ai l'effet inverse de ce que je voudrais ...

**CCyrillus** · 14/12/2013, 00h50

Bonsoir,
purement en CSS, je ne vois aucune posiibilité avec des raccord de fond en fondus.
Avec des couleurs unies, il y a la possibilité de poser des elements arrondis les uns au dessus des autres pour dessiner quelque chose de ressemblant.
http://codepen.io/gc-nomade/pen/eHzfk

L'ideal est un png en image de fond , avec eventuellement la taille(ratio) hauteur/largeur maitrisés du conteneur de texte avec un background-size.
++

**Candygirl** · 15/12/2013, 11h08

Bonjour,

Un autre exemple en jouant avec un background-attachment fixed:

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test mail</title>
<style>
body {background:url(http://lorempixel.com/1200/1000/abstract/6/) top center fixed;}
 
div {
        width:320px;
        margin:0 auto;
}
 
p {
        background:#460052;
        background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.8) 100%);
        border-radius:15px 15px 0 15px;
        padding:18px;
        margin:0 78px 25px 0;
        position:relative;
        min-height:20px;
        color:#fff;
        text-shadow:0px 0px 2px #000;
        box-shadow:-2px -2px 2px rgba(255,255,255,0.2);
}
 
p:before {
        content:'';
        width:27px;
        height:100%;
        position:absolute;
        bottom:0;right:-27px;
        background:#460052;     
        background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.8) 100%);
}
 
p:after {
        content:'';
        background:url(http://lorempixel.com/1200/1000/abstract/6/) top center fixed;
        width:70px;
        border-radius:0 0 0 35px;
        position:absolute;
        bottom:-2px; top:0;right:-70px;
}
 
img {
        position:absolute;
        z-index:10;
        right:-78px;
        bottom:3px;
        border:2px solid #FFF;
        box-shadow:0 0 5px rgba(0,0,0,0.8);
        border-radius:100%;
}
 
p:nth-child(odd) {
        border-radius:15px 15px 15px 0;
        background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.4) 100%);    
        color:#000;
        margin:0 0 25px 78px;
        text-shadow:0px 0px 2px #fff;
        box-shadow:2px -2px 2px rgba(0,0,0,0.4);        
}
 
p:nth-child(odd):before {
        right:auto;left:-27px;
        background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.4) 100%);    
}
 
p:nth-child(odd):after {
        right:auto;
        left:-70px;
        border-radius:0 0 35px 0;       
}
 
p:nth-child(odd) img {
        left:-78px;
        right:auto;
}
</style>
</head>
<body>
	<div>
		<p>làlàlà<br>lalala<img src="http://lorempixel.com/66/66/people/6" alt="trucmuche" /></p>
		<p>làlàlà<br>lalala<img src="http://lorempixel.com/66/66/people/6" alt="trucmuche" /></p>
		<p>làlàlà<br>lalala<img src="http://lorempixel.com/66/66/people/6" alt="trucmuche" /></p>
		<p>làlàlà<br>lalala<br>lalala<br>lalala<img src="http://lorempixel.com/66/66/people/6" alt="trucmuche" /></p>
	</div>
</body>
</html>

Mais on est assez vite limités dans l'utilisation des effets d'ombre, transparences, border vu la superposition.