自定义标题自举手风琴

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/