http://jsfiddle.net/vcv8y4uc/1/
I've done a few things, and I'm using the grid system of bootstrap, as you can see.
I'm with some doubts.
It is wrong to set the width of the box that way? How can I create these spears on top and in the footer of the box? Can anyone help me with this?
How can I make the 'SEXTAS E SÁBADOS' stay with a background 100% over the grid size and not the box?
Thanks!
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="O Pub Crawl Oficial de São Paulo" content="" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Bootstrap CDN -->
<!-- Animate CDN -->
</head>
<style type="text/css">
.col-md-3 {
position: relative;
}
.box {
margin: 0 auto;
background: #f98835;
width: 250px;
height: 50%;
text-align: center;
}
.dia {
padding: 5px 0;
width: 100%;
color: white;
background: black;
}
h1 {
font-size: 20px;
padding-top: 20px;
}
.black {
margin: 0 auto;
background: #000;
width: 210px;
height: 210px;
background-image: url('http://lorempixel.com/250/250/');
}
</style>
<body>
<section>
<div class="container">
<div class="col-md-3">
<div class="box">
<h1 class="dia">SEXTAS E SÁBADOS</h1>
<h1>VILA MADALENA</h1>
<div class="black"></div>
</div>
</div>
<div class="col-md-3">
<div class="box">
<h1 class="dia">SEXTAS E SÁBADOS</h1>
<h1>VILA MADALENA</h1>
<div class="black"></div>
</div>
</div>
<div class="col-md-3">
<div class="box">
<h1 class="dia">SEXTAS E SÁBADOS</h1>
<h1>VILA MADALENA</h1>
<div class="black"></div>
</div>
</div>
<div class="col-md-3">
<div class="box">
<h1 class="dia">SEXTAS E SÁBADOS</h1>
<h1>VILA MADALENA</h1>
<div class="black"></div>
</div>
</div>
</div>
</section>
</body>
</html>
This is how I would do this:
Use linear-gradient for those borders(col-md-3:before and col-md-3:after), set the width of .dia to total width + 40px and give it a -20px offset by setting left: -20px. I've removed the bootstrap and added display: inline-block to .col-md-3.
.col-md-3 {
display: inline-block;
width: 110%;
margin: 25px;
}
.container {
height: 400px;
}
.box {
margin: 0 auto;
background: #f98835;
width: 250px;
height: 50%;
text-align: center;
}
.dia {
padding: 5px 0;
color: white;
background: black;
width: 290px;
left: -20px;
position: relative;
}
h1 {
font-size: 20px;
padding-top: 20px;
}
.black {
margin: 0 auto;
background: #000;
width: 210px;
height: 210px;
background-image: url('http://lorempixel.com/250/250/');
}
.col-md-3 {
position: relative;
width: 250px;
}
.col-md-3:before {
content: " ";
display: block;
position: relative;
top: 20px;
left: 0px;
width: 100%;
height: 40px;
background: linear-gradient(white 0%, transparent 0%), linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
background: -webkit-linear-gradient(white 0%, transparent 0%), -webkit-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -webkit-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
background: -o-linear-gradient(white 0%, transparent 0%), -o-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -o-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
background: -moz-linear-gradient(white 0%, transparent 0%), -moz-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -moz-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 63px 32px, 63px 32px;
background-position: -18% 0%;
}
.col-md-3:after {
content: " ";
display: block;
position: relative;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: 0px;
left: 0px;
width: 100%;
height: 42px;
background: linear-gradient(white 0%, transparent 0%), linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
background: -webkit-linear-gradient(white 0%, transparent 0%), -webkit-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -webkit-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
background: -o-linear-gradient(white 0%, transparent 0%), -o-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -o-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
background: -moz-linear-gradient(white 0%, transparent 0%), -moz-linear-gradient(125deg, #F98835 33.33%, transparent 33.33%) 0 0%, #F98835 -moz-linear-gradient(55deg, #F98835 33.33%, white 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 63px 32px, 63px 32px;
background-position: -18% 0%;
}<body>
<section>
<div class="container">
<div class="col-md-3">
<div class="box">
<h1 class="dia">SEXTAS E SÁBADOS</h1>
<h1>VILA MADALENA</h1>
<div class="black"></div>
</div>
</div>
<div class="col-md-3">
<div class="box">
<h1 class="dia">SEXTAS E SÁBADOS</h1>
<h1>VILA MADALENA</h1>
<div class="black"></div>
</div>
</div>
<div class="col-md-3">
<div class="box">
<h1 class="dia">SEXTAS E SÁBADOS</h1>
<h1>VILA MADALENA</h1>
<div class="black"></div>
</div>
</div>
<div class="col-md-3">
<div class="box">
<h1 class="dia">SEXTAS E SÁBADOS</h1>
<h1>VILA MADALENA</h1>
<div class="black"></div>
</div>
</div>
</div>
</section>
</body>