Bootstrap Snippet triangle images using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="kwadrat">
<div class="trojkat">
<div class="trojkat_bg"></div>
</div>
</div>
<div class="kwadrat2">
<div class="trojkat2">
<div class="trojkat_bg2"></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
.kwadrat
{ 
  width: 232px; 
  height: 180px; 
  border-bottom: 1px solid #000; 
  overflow: hidden; 
}
.trojkat
{ 
  position: relative; 
  overflow: hidden; 
  transform: rotate(45deg) skew(10deg,10deg); 
  border-left: 1px solid #000; 
  border-top: 1px solid #000;
  width: 200px;
  height: 200px;
  margin:81px 0 0 16px;
}
.trojkat_bg
{
    position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(http://jakub-zajac.pl/wp-content/uploads/2014/03/infe.jpg);
  background-size: 100%;
  background-position: center top;
  transform: skew(-10deg,-10deg) rotate(-45deg) ;
  transition: .3s;
}
.trojkat_bg:hover{ background-size: 90%; }
        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"triangle images"
Bootstrap 3.3.0 Snippet by sanjay84

Related: See More

Questions / Comments:

"triangle images" Bootstrap 3.3.0 Snippet by sanjay84

Related: See More

Questions / Comments:

"triangle images"
Bootstrap 3.3.0 Snippet by sanjay84