Tema de laboratorio de diseño de forma de cinta de CSS puro

Los efectos de cinta CSS se tienen la posibilidad de hacer fácilmente con CSS. Esta técnica solo emplea CSS, no HTML o imágenes adicionales.
El HTML básico es limpio y simple:

Cinta CSS pura

En esta demostración, ubicamos la cinta CSS en un cuadro con un h3 Título y algo de artículo:

  
  

    
Lorem Ipsum




    
Lorem ipsum mal sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  

Aquí está el CSS para ubicar el área funcional:

.ribbon-box .ribbon 
 display: inline-block;
 position: absolute;
 left: 20px;
 top: 38px;
 

Las formas de las bandas son solo límites :before Con :after Votantes.

.ribbon-box .ribbon:before,
 .ribbon-box .ribbon:after 
 content: "";
 display: block;
 position: absolute;
 height: 10px;
 bottom: -8px;
 border: 18px solid #53b0de;
 

.ribbon-box .ribbon:before 
 border-bottom-color: transparent;
 bottom: -40px;
 

La esquina se crea configurándola para que sea transparente border-bottom-color la propiedad de :before Votantes.

Ver demostración