html - 自定义 header Bootstrap Accordion

Question

下面是我的简单 bootstrap accordion，我如何将自定义 header 添加到我的 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>

自定义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;
}

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