"curved div ,slanted div,angled edges "
Bootstrap 3.0.0 Snippet by sunilkaranjit

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="block -berry edge--bottom">
<h1>Bottom Angled Edge</h1>
</div>
<div class="block -blue edge--bottom--reverse">
<h1>Bottom Angled Edge</h1>
<p>Reversed</p>
</div>
<div class="block -berry edge--top">
<h1>Top Angled Edge</h1>
</div>
<div class="block -blue edge--top--reverse">
<h1>Top Angled Edge</h1>
<p>Reversed</p>
</div>
<div class="block -orange edge--both">
<h1>Top & Bottom Angled Edges</h1>
</div>
<div class="block -green edge--both--reverse">
<h1>Top & Bottom Angled Edges</h1>
<p>Reversed</p>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.edge--bottom {
position: relative;
z-index: 1;
}
.edge--bottom:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
}
.edge--bottom:after {
bottom: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.edge--bottom--reverse {
position: relative;
z-index: 1;
}
.edge--bottom--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Get Shit Done Kit

Questions / Comments: