How to create css headers for bootstrap div's - html

Question

I'm trying to make the div for bootstrap to look like below not sure how you do it with css. The arrow and the section labeleled movies
Please view the pic at https://plus.google.com/+SamuelMuiruri/posts/fMMhNQwPbCm

Answer 1

First of all you have to position the title "Movies" about the description. The arrow is a only a little css magic
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/

Answer 2

I think you want to create a TRIANGLE edge below the div containg the text -'MOVIES' (see screenshot below)
I have created a code for you here: JSFIDDLE
HTML:
<div>Movies</div>
CSS
div{
position: relative;
display:inline-block;
width: 140px;
padding: 10px;
background:#FFC000;
text-transform: uppercase;
font-size: 24px;
text-align: center;
}
div:after{
position: absolute;
width: 0;
height: 0;
border-bottom: 40px solid rgba(0, 0, 0, 0);
border-right: 40px solid #FFC000;
bottom: -15px;
left: 0;
right:0;
margin:auto;
content: '';
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
transform: rotate(135deg);
}