right: 0; top: 0; width: 0;}Si queremos darle nuestro toque especial podemos anadir en lugar de color de fondo una textura con background: url(url-imagen) repeat scroll 0 0;En su interior tambien podemos anadir alguna imagen con <img src="url-de-la-imagen"> La altura se ira adaptando a lo incluido en el contenido y la anchura a la establecida en width.El tamano de la esquina tambien lo podemos aumentar en: border-width: 0 16px 16px 0;Anadimos sombra al texto con text-shadow: 1px 1px 1px #000;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim..note-fondo { background: url(url-imagen) repeat scroll 0 0 #3A7F2A; color: #FFFFFF; /* color de texto */text-shadow: 1px 1px 1px #000; margin: 2em auto; overflow: hidden; padding: 1em 1.5em; position: relative; width: 480px; /* ancho */}.note-fondo:before { -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); background: none repeat scroll 0 0 #ADF96E; /* color esquina */ border-color: #FFFFFF #FFFFFF #ADF96E #ADF96E; /* color de borde */ border-style: solid; border-width: 0 36px 36px 0; content: ""; display: block; position: absolute; right: 0; top: 0; width: 0;}.note { background: none repeat scroll 0pt 0pt rgb(151, 192, 47); color: rgb(255, 255, 255); margin: 2em auto; overflow: hidden; padding: 1em 1.5em; position: relative; width: 480px; }.note:before { -moz-box-shadow: 0pt 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); background: none repeat scroll 0pt 0pt rgb(101, 142, 21); border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(101, 142, 21) rgb(101, 142, 21); border-style: solid; border-width: 0pt 16px 16px 0pt; content: ""; display: block; position: absolute; right: 0pt; top: 0pt; width: 0pt; }.note.blue { background: none repeat scroll 0pt 0pt rgb(83, 163, 180); }.note.blue:before { background: none repeat scroll 0pt 0pt transparent; border-color: rgb(255, 255, 255) rgb(255, 255, 255) transparent transparent; }.note.taupe { background: none repeat scroll 0pt 0pt rgb(153, 152, 104); }.note.taupe:before { background: none repeat scroll 0pt 0pt rgb(189, 187, 139); border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(189, 187, 139) rgb(189, 187, 139); }.note-fondo { background: url("http://4.bp.blogspot.com/_q4j3j-JA2ro/TDL0E9NfPxI/AAAAAAAAPE8/K07sBYhLWCQ/s0/fondo-body.png") repeat scroll 0pt 0pt rgb(58, 127, 42); color: rgb(255, 255, 255); text-shadow: 1px 1px 1px rgb(0, 0, 0); margin: 2em auto; overflow: hidden; padding: 1em 1.5em; position: relative; width: 480px; }.note-fondo:before { -moz-box-shadow: 0pt 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); background: none repeat scroll 0pt 0pt rgb(173, 249, 110); border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(173, 249, 110) rgb(173, 249, 110); border-style: solid; border-width: 0pt 36px 36px 0pt; content: ""; display: block; position: absolute; right: 0pt; top: 0pt; width: 0pt; } Si te ha gustado Compartelo ! Localizar y personalizar los creditosMenu imagenes con CSSSencillo menu con CSSSeparacion entre lineas, palabras y letrasGaleria con CSS efecto hoverfonte e creditos:http://gemablog-.blogspot.com/2011/01/efecto-esquina-doblada-con-css.htmltraduzido: Dobrado efeito de canto com CSS Lorem ipsum dolor sit amet, elit adipiscing consectetur. Mauris rhoncus risus pulvinar, sagittis Ornare vel lacus amet sentar. Duis SEM magna vel. pulvinar Proin ligula velit ultrices eleifend vestibulo. Mauris eu Nunc