28172 sujets

CSS et mise en forme, CSS3

Coin retourné avec ombrage

Bonjour,

Tout d'abord, tous mes voeux pour cette nouvelle année.

Une image valant mieux qu'un long discours, je souhaiterai réaliser ce 'folder corner' pour le coin en bas à droite d'un 
div
, sans utiliser d'image et donc tout en CSS.
Ma plus grosse problématique est l'ombrage. Les différents exemples que j'ai pu trouver (notamment sur jsfiddle) proposent un peu ce genre de coin mais sans ombrage et c'est normal, vue que l'ombrage suit le bord 'normal' et non celui retourné.
Je peux aussi utiliser un 
border-bottom: 100px / 25px;
mais dans ce cas, 1/ ce n'est pas aussi 'carré' et 2/ comment faire le coin retourné ?

upload/57291-foldercorn.png

Merci pour votre aide.
Qu'est-ce qu'il y a à gagner ? Bah mon estime devant l'éternel. C'est pas mal, non ?
Modifié par FranckL (06 Jan 2015 - 02:14)
Je ne vois pas comment faire le coin retourné en pur css.
Pour l'ombre tu peux faire:

.post-it{
	background: #fff;
	position: relative;
	border-bottom-right-radius: 18px;
}
.post-it:after{
	box-shadow: -2px 15px 8px #000; 
	position: absolute; 
	margin: 0 0 0 0; 
	bottom: 18px; 
	z-index: -2; 
	width: 58%; 
	height: 15%; 
	content: "";
	-webkit-transform: rotate(1.5deg); 
	-ms-transform: rotate(1.5deg); 
	transform: rotate(1.5deg); 
	right: 2px; 
	left: auto;
}


Si tu y arrives partage ton résultat ici.
Modifié par casp (06 Jan 2015 - 13:36)
Merci pour ce bout de CSS.
Je dois avouer que, là, à l'heure qu'il est, je pense que je vais devoir passer par une image pour le bas de ce div Smiley decu .

Je ne manquerai effectivement pas de partager le résultat si j'y arrive.
Rendez-vous en 2028 !!! Smiley langue
bonsoir,

tu peux aussi essayer avec skew et border radius pour déformer e pseudo élément et tronqué un arrondis avec border-radius. http://codepen.io/gc-nomade/pen/LExpLj
Cependant, ce n'est pas une soluce, mais plutôt pour la curiosité.
Une image sera l'option à privilégier pour un résultat parfaitement maitrisé Smiley smile
++
Ah pas mal du tout !!!! Je dois avouer que je ne connaissais pas skew.
Je vais creuser cette piste.

Merci
Sujet clos
Aller à