Q:

custom header bootstrap accordion

The below is my simple bootstrap accordion, how do I go about adding a custom header to my accordion.
<div class="accordion" id="accordion2">
   <div class="panel panel-primary">

<div class="panel-heading header">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#region">
      <div class="sqr pull-left "><span>1</span></div>
      <div class="appTest">Region</div>
     </a>
  </h4>
</div>

<div id="region" class="panel-collapse collapse in">
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat
  </div>
</div>
</div>      
</div>

Custom CSS code
.sqr {
  width: 2em;
  height: 2em;
  padding: 4px;
  @include prefix(border-radius, 5px);
  background: #FFFFFF;
  border: 1px solid #5fa3c6;
  font: 12px Arial, sans-serif;
  text-align: center;
  color: #5fa3c6;
  margin: 0 17px;
}

.appTest {
  padding-top: 4px;
}

.header{
  box-shadow: -10px 10px #CCC;
  padding-left:10px;
}

Is it possible to create that effect in css or should we go with two set of images.

A:

For example, use :before pseudo-element and css-transform property with rotate:
HTML:
<header>
    Header text.
</header>

<main>
    Your content here. 
</main>

CSS:
header {
    position: relative;
    background: #5fa3c6;
    padding: 8px 10px;
    color: #ffffff;
    font-size: 20px;
}

header:before {
    z-index: -1;
    position: absolute;
    width: 14px;
    height: 14px;
    background: #3b6c8a;
    content: '';
    left: 3px;
    bottom: -7px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

main {
    margin-left: 10px;
    border-left: 1px #5fa3c6 solid;
    padding: 10px;
    background: #ffffff;
}

Fiddle: http://jsfiddle.net/ArtemFitiskin/LutJQ/2/ 

