<h1 contenteditable>Один элемент и CSS - Печатаем здесь...</h1>

<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript"></script>

/*Сброс*/

* {margin: 0; padding: 0;}

html, body {height: 100%;}

body {

                background: #B1E3E2;

                box-shadow: inset 0 0 100px 20px #80D0CF;

                text-align: center;

}

h1 {

                display: inline-block;

                font-size: 14px;

                line-height: 28px;

                color: #8699A0;

                text-shadow: 0 0 1px #758890;

                margin: 120px 0;

                font-family: arial, verdana;

                outline: none;

                padding: 14px 30px;

                position: relative;

                text-transform: uppercase;

                /* Небольшие тени для 3D эффекта */

                box-shadow:

                               0 0 30px 0 rgba(0, 0, 0, 0.1),

                               0 36px 0 -18px #B1E3E2;

}

/* Концы ленты*/

h1:before {

                content: '';

                position: absolute;

                top: 18px;

                left: -15%;

                z-index: -1;

                width: 130%;

                /* Используем логику треугольника - 2 боковые рамки и высота 0. Таким образом, получаются треугольники слева и справа */

                height: 0;

                border: 28px solid rgba(0, 0, 0, 0);

                border-left: 28px solid #B1E3E2;

                border-right: 28px solid #B1E3E2;

}

/* Псевдоэлемент after будет негативом для ленты, чтобы заквершить построение эффекта*/

h1:after {

                content: '';

                width: 100%;

                height: 0;

                position: absolute;

                top: 100%; left: 0;

                z-index: -1;

                /* Высота верхней рамки такая же как и ширина левой и правой рамок для плавного эффекта. Высота верхней рамки также одинаковая сос смещением элемента :before сверху*/

                border-top: 18px solid #99acb2;

                border-left: 18px solid transparent;

                border-right: 18px solid transparent;

}

h1, h1:before {

                /*Многоцветный фон - используем комбинацию 4 фонов для построения эффекта */

                background-image:

                               /* 2 серых рамки */

                               linear-gradient(

                                               transparent 8%,

                                               rgba(0, 0, 0, 0.1) 8%,

                                               rgba(0, 0, 0, 0.1) 14%,

                                               transparent 14%,

                                               transparent 86%,

                                               rgba(0, 0, 0, 0.1) 86%,

                                               rgba(0, 0, 0, 0.1) 92%,

                                               transparent 92%

                               ),

                               /* Белый глянцевый градиент */

                               linear-gradient(

                                               rgba(255, 255, 255, 0.75),

                                               rgba(255, 255, 255, 0)

                               ),

                               /* Тонкие полоски */

                               linear-gradient(

                                               45deg,

                                               transparent 40%,

                                               rgba(0, 0, 0, 0.1) 40%,

                                               rgba(0, 0, 0, 0.1) 60%,

                                               transparent 60%

                               ),

                               /* Белая основа */

                               linear-gradient(white, white);

                background-size:

                               cover, /* Рамки */

                               cover, /* Белый глянец */

                               4px 4px, /* Тонкие полоски */

                               cover; /* Белая основа */

}

h1, h1:before, h1:after {

                box-sizing: border-box;

                /* Выводим рамки по концам ленты */

                background-origin: border-box;

}