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>
</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属性使用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;
}

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

自定义标头bootstrap手风琴

1 个答案: