html - 如何为引导 div 创建 css header

Question

我正在尝试使 bootstrap 的 div 看起来像下面的样子，但不确定您是如何使用 css 来实现的。箭头和标记为 movies 的部分请在 https://plus.google.com/+SamuelMuiruri/posts/fMMhNQwPbCm 查看图片

Answer 1

首先，您必须将标题“电影”放在描述的位置。箭头只是一点点 css 魔法

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="specialbox">
                <img src="https://placeimg.com/320/240/tech"/>
                <div class="specialbox__description">
                    <span class="specialbox__title">Movies</span>
                    <h2>Age of Ultron</h2>
                    <p>Tony Stark tries ti jumpstart a dormant peace-kepping program...</p>
               </div>
            </div>
        </div>
    </div>
</div>

CSS:

.specialbox {
    border: 3px solid #ccc;
}

.specialbox img {
    width: 100%;
}

.specialbox__description {
    position: relative; /* You need this, to position the title element absolute to the description */
    padding: 20px 10px;
}

.specialbox__title {
    position: absolute;
    background-color: yellow;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    top: -40px; /* Adjust to the height of the title container */
}
/* Magic described here */
.specialbox__title:after {
      position: absolute;
      display: block;
      content: '';
      width: 30px;
      height: 30px;
      border: 15px solid transparent;
      left: 50%;
      bottom: -30px;
      margin-left: -15px;
      border-top: 15px solid yellow;
}

http://jsfiddle.net/ytbtbt1d/