自定義標題自舉手風琴

Question

以下是我簡單的自舉手風琴，我如何去添加自定義標題給我的手風琴。

<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> 

自定義CSS代碼

.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; 
} 

是否有可能在CSS創建效果還是應該去兩個組圖像。

Answer 1

例如，使用:before僞元素和css-transform財產與旋轉：

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; 
} 

小提琴：http://jsfiddle.net/ArtemFitiskin/LutJQ/2/