<!--HTML-->
<style>
.hexagon {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 150px;
  height: 82px;
  position: relative;
  border: none;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  text-align: center;
  color: rgba(255,255,255,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #1abc9c;
}

.hexagon::before {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 0;
  height: 0;
  position: absolute;
  content: "";
  top: -40px;
  left: 0;
  border: 75px solid rgba(0,0,0,0);
  border-top: 0 solid;
  border-bottom: 40px solid #1abc9c;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: none;
}

.hexagon::after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 0;
  height: 0;
  position: absolute;
  content: "";
  bottom: -40px;
  left: 0;
  border: 75px solid rgba(0,0,0,0);
  border-top: 40px solid #1abc9c;
  border-bottom: 0 solid;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: none;
}</style>

<div style="margin-top: 50px;margin-bottom: 50px;">
<div class="hexagon"><div style="margin-top: 30px!important; padding: 10px; height: 60px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia blandit vulputate.</div>
</div></div>


<div class="code-box" style="width:410px;"> 
<strong class="legend" align="center">
<a href="#" 'pre')[0]); return false;>Платим в теме баллов и заполняем код</a></strong>
<div class="blockcode">
<div class="scrollbox" style="height: 100%; text-align:left;"><pre>[*code]<*b>внешность на англ<*/b> - <*a href="ССЫЛКА НА ПРОФИЛЬ">Ваш ник<*/a><*br>[*/code]</pre></div></div></div>