Categories
css css-shapes twitter-bootstrap twitter-bootstrap-3

Create a ribbon header responsive in bootstrap

I’ve made this quickly using pseudo element and css triangles. Maybe it can inspire you

body {
background-color: white;
}
header {
position: relative;
background-color: blue;
color: white;
text-align: center;
width: 95%;
height: 40px;
}
header::before,
header::after {
content: '';
display: block;
position: absolute;
}
header::before {
height: 40px;
width: 50px;
right: -30px;
top: 4px;
background-color: darkblue;
z-index: -1;
}
header::after {
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 20px 0;
border-color: transparent white transparent transparent;
right: -30px;
top: 4px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 header">
<header>
<h1>Header</h1>
</header>
</div>
</div>