rombo

animacion con css3

by cesar nieto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-12">
  <div class="fluid">
    <div class="col-sm-6 trianguloLeftTop">
      <div id="triangle-topleft">
        <span>hola1</span>
      </div>
    </div>
    <div class="col-sm-6 trianguloRightTop">
      <div id="triangle-topright">
        <span>hola2</span>
      </div>
    </div>
  </div>
  
  <div class="fluid">
    <div class="col-sm-6 trianguloLeftBottom">
      <div id="triangle-bottomleft">
        <span>hola3</span>
      </div>
    </div>
    <div class="col-sm-6 trianguloRightBottom">
      <div id="triangle-bottomright">
        <span>hola4</span>
      </div>
    </div>
  </div>
</div>

CSS

/********* top-left *********/
#triangle-topleft {
	width: 0;
	height: 0;
  border-right: 50px solid #094FA4;
  border-top: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid #094FA4;
  border-radius: 50% 0 0 0;
  -webkit-transition: 1s;
  transition: 1s;
}

#triangle-topleft span {
  position: absolute;
  bottom: 25px;
  right: 25px;
  font-size: 40px;
  display: block;
  color: transparent;
  -webkit-transition: 1s;
  transition: 1s;
}

#triangle-topleft:hover {
    border-left: 100px solid #094FA4;
    border-top: 50px solid #094FA4;
    border-radius: 10px 0 0 10px;
}

#triangle-topleft:hover span {
  display: block;
  color: #F2F2F2;
}

.trianguloLeftBottom {
    text-align: -webkit-right;
    padding-top: 1px;
    padding-right: 1px !important;
}

/********* top-right *********/
#triangle-topright {
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-top: 50px solid transparent;
  border-left: 50px solid #009EE5;
  border-bottom: 50px solid #009EE5;
  border-radius: 0 50% 0 0;
  -webkit-transition: 1s;
  transition: 1s;
}

#triangle-topright:hover {
    border-right: 100px solid #009EE5;
    border-top: 50px solid #009EE5;
    border-radius: 0 10px 10px 0;
}

#triangle-topright span {
  position: absolute;
  bottom: 25px;
  left: 25px;
  font-size: 40px;
  display: block;
  color: transparent;
  -webkit-transition: 1s;
  transition: 1s;
}

#triangle-topright:hover span {
  display: block;
  color: #D8D8D8;
}

.trianguloRightTop {
    padding-left: 1px !important;
    padding-bottom: 1px;
}

/********* bottom-left *********/
#triangle-bottomleft {
  width: 0;
  height: 0;
  border-right: 50px solid #B5E5F9;
  border-top: 50px solid #B5E5F9;
  border-left: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-radius: 0 0 0 50%;
  -webkit-transition: 1s;
  transition: 1s;
}

#triangle-bottomleft:hover {
    border-left: 100px solid #B5E5F9;
    border-bottom: 50px solid #B5E5F9;
...