CodePen Embed - oPbXPE

<div class="codeholder"><div class='box' style='float: left; margin-left: 50px;'><h5 class='s-double'>Двойная простая лента</h5><h5 class='double'>Двойная сложная лента</h5><h5 class='s-single'>Одинарная простая лента</h5><h5 class='single'>Одинарная сложная лента</h5></div><div class='box' style='float: right; margin-right: 50px;'><div class='rotate'><h5 class='r-single'>Лента</h5></div></div><br clear='all'> </div><br />
<br />
<br />
<br />
<a href="http://www.magentawave.com/2015/11/3d-css-ribbons.html">Страница примера</a>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-200779398'>
<a href='https://www.blogger.com/post-edit.g?blogID=2488995177627007538&postID=5240593666121351904&from=pencil' title='Изменить сообщение'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<span class='post-labels'>
Ярлыки:
<a href='http://demo.magentawave.com/search/label/CSS' rel='tag'>CSS</a>
</span>
</div>
<div class='post-footer-line post-footer-line-2'></div>
<div class='post-footer-line post-footer-line-3'></div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<div id='backlinks-container'>
<div id='Blog1_backlinks-container'>
</div>
</div>
</div>
</div>

        </div></div>
      
<!--Can't find substitution for tag [adEnd]-->
</div>
<div class='clear'></div>
<div class='post-feeds'>
</div>
<script type="text/javascript">window.___gcfg = {'lang': 'ru'};</script>
</div><div class='widget HTML' data-version='1' id='HTML1'>
<div class='widget-content'>
<div style="font:normal normal 22px verdana; color:#000;">Официальный сайт<br/><a style="padding:0; margin:0;" href="http://www.magentawave.com"><img border="0" width="320" hight="80"  src="https://1.bp.blogspot.com/-5d2B0tLFP0I/URwF9zm3Q3I/AAAAAAAAE1A/LX4UfVlRL4Q/s1600/MWv.3.png"/></a></div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=2488995177627007538&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=main' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='Изменить'>
<img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
</div>
</div>
<div style='clear: both'></div>
<!-- columns -->
</div>
<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot no-items section' id='footer-1'></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>
<!-- content -->
</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>

.content-inner {
background-color: #FFF;
}
.post-body {
font: normal normal 100% sans-serif;
z-index: 3;
}
.widget .post-body td {text-align: left; padding: 5px;}

.codeholder {}

.s-double {
position: relative;
display: block;
background: #8968CD;
box-shadow: 0px 2px 15px -2px #666;
font: normal 400 16px Tahoma;
color: #E8DBC2;
text-align: center;
text-shadow: 1px 1px 1px #000;
padding: 10px 20px;
margin: 20px 0 0 -20px;
height: 40px;
width: 100%;
}
.s-double::after {
content: '';
position: absolute;
right: 0;
top: 100%;
border-width: 10px 20px;
border-style: solid;
border-color: #68228B transparent transparent transparent;
border-radius: 1px;
box-shadow: 0px 20px 15px -20px #666;
box-sizing: border-box;
padding: 0;
width: 100%;
z-index: -1;
}

.double {
position: relative;
display: block;
background: #8968CD;
box-shadow: 0px 2px 15px -2px #666;
font: normal 400 16px Tahoma;
color: #E8DBC2;
text-align: center;
text-shadow: 1px 1px 1px #000;
padding: 10px 20px;
margin: 20px 0 0 -20px;
height: 40px;
width: 100%;
}
.double::after,
.double::before {
content: '';
box-sizing: border-box;
position: absolute;
border-radius: 1px;
z-index: -1;
right: 0;
}
.double::before {
bottom: -10px;
border-width: 30px 20px;
border-style: solid;
border-color: #7D26CD transparent #7D26CD transparent;
box-shadow: 0px 20px 15px -20px #666;
width: 116%;
margin: 0 -40px;
}
.double::after {
top: 100%;
border-width: 10px 20px;
border-style: solid;
border-color: #68228B transparent transparent transparent;
border-radius: 1px;
width: 100%;
padding: 0;
}
.single {
position: relative;
display: block;
background: #8968CD;
box-shadow: 10px 4px 20px -2px #666;
font: normal 400 16px Tahoma;
color: #E8DBC2;
text-align: center;
text-shadow: 1px 1px 1px #000;
padding: 10px 20px;
margin: 20px 0 0 -20px;
height: 40px;
width: 40%;
}
.single::after,
.single::before {
content: '';
box-sizing: border-box;
position: absolute;
border-radius: 1px;
right: 0;
}
.single::before {
top: 100%;
right: 100%;
border-width: 10px 20px;
border-style: solid;
border-color: #68228B transparent transparent transparent;
border-radius: 1px;
width: 0;
margin: 0 -40px;
z-index: -1;
}
.single::after {
bottom: 0px;
border-width: 30px 20px;
border-style: solid;
border-color: #8968CD transparent #8968CD #8968CD;
width: 0;
margin: 0 -40px;
z-index: 1;
}
.s-single {
position: relative;
display: block;
background: #8968CD;
box-shadow: 10px 4px 20px -2px #666;
font: normal 400 16px Tahoma;
color: #E8DBC2;
text-align: center;
text-shadow: 1px 1px 1px #000;
padding: 10px 20px;
margin: 20px 0 0 -20px;
height: 40px;
width: 40%;
}
.s-single::after,
.s-single::before {
content: '';
display: block;
box-sizing: border-box;
position: absolute;
border-radius: 1px;
width: 0;
z-index: -1;
}
.s-single::after {
top: 100%;
right: 100%;
border-width: 10px 20px;
border-style: solid;
border-color: #68228B transparent transparent transparent;
border-radius: 1px;
margin: 0 -40px;
}
.s-single::before {
top: 10px;
left: 0;
border-width: 30px 20px;
border-style: solid;
border-color: #7D26CD #7D26CD #7D26CD transparent;
box-shadow: 0px 20px 15px -20px #666;
padding: 0 30px;
margin: 0 -40px;
}
.rotate {
  position: absolute;
  right: -15px;
  top: -15px;
  z-index: 1;
  overflow: hidden;
  width: 200px;
  height: 200px;
  text-align: right;
}
.r-single {
display: block;
position: absolute;
top: 10px;
left: 15px;
background: #8968CD;
box-shadow: 0px 2px 15px -2px #666;
font: normal 400 16px Tahoma;
color: #E8DBC2;
text-align: center;
text-shadow: 1px 1px 1px #000;
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
padding: 10px 20px;
height: 40px;
width: 100%;
}
.r-single::after,
.r-single::before {
content: '';
position: absolute;
top: 100%;
border-width: 10px 10px;
border-style: solid;
border-radius: 1px;
box-sizing: border-box;
padding: 0;
width: 0;
z-index: -1;
}
.r-single::before {
left: 0;
border-color: #68228B transparent transparent #68228B;
}
.r-single::after {
right: 0;
border-color: #68228B #68228B transparent transparent;
}
.box {
position: relative;
height: 500px;
max-width: 500px;
width: 450px;
background: lightblue;
}
.box:before {
position: absolute;
right: -10px;
bottom: 50px;
border-width: 15px;
border-style: solid;
border-color: #684FA3 #684FA3 #684FA3 transparent;
box-shadow: 10px 7px 15px -5px #666;
font: normal normal 16px/1px Tahoma, Arial, sans-serif;
color: #fff;
text-indent: 15px;
text-shadow: 1px 1px 1px #000;
height: 0;
min-width: 60px;
max-width: 140px;
}
.box:after {
position: absolute;
content:'';
right: -10px;
bottom: 40px;
border-width: 5px;
border-style: solid;
border-color: #3A2C5A transparent transparent #3A2C5A;
height: 0;
}
.box:before {
content:'Псевдо-Элемент';
}

This Pen is owned by zornet on CodePen.

See more by @zornetru on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.