CODEWITHSUNDEEP
javascripthtmlcss
Mark
Mark

Reputation: 399

overflow:hidden doesn't work

I'm having trouble with overflow:hidden. I have 2 logos at the top of my page, with a trapezium underlying it. I basically made 2 parallelograms and used transform: skewX() to make it tilt at an angle, then overflow:hidden to make sure the sides don't show up.

My point of view of this can be seen here: http://imgur.com/a/cAUUj

A live version is available at http://ddlgaming.com/giga/giga2/

Thank you in advance!

My code is as follows:

.clearfix {
  clear: both;
}

body {
  background-color: rgb(21, 14, 43);
  background-image: url("../images/backgroundimage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100%;
  background-position: center center;
  overflow: hidden;
}

#gigalogomainbox {
  float: left;
  width: 30vw;
  height: 10vw;
  overflow: hidden;
  transform: skewX(20deg);
  margin: 0 0 0 -4vw;
  background-color: white;
}

#gigalogobox {
  margin: 0 3vw 0 2vw;
  padding: 0 0 0 2vw;
  width: 100%;
  height: 8vw;
}

#gigalogo {
  width: 80%;
  margin: 3vw 2vw 0 0;
  height: 7vw;
}

#steamlogomainbox {
  width: 15vw;
  height: 10vw;
  float: right;
  margin: 0 -4vw 0 0;
  background-color: white;
  /*000c21*/
  transform: skewX(-20deg);
  overflow: hidden;
}

#steamlogobox {
  margin: 0 -2vw 0 3vw;
  padding: 0;
  width: 100%;
  height: 20%;
}

#steamlogo {
  padding: 0 0 0 2vw;
  margin: 3vw 0vw 0 0;
  transform: skewX(20deg);
  height: 7vw;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
</head>

<body>


  <!--Giga logo, top left-->
  <div id="gigalogomainbox" class="clearfix">
    <div id="gigalogobox">
      <img id="gigalogo" src="images/gigalogo.png">
    </div>
  </div>

  <!--Steam logo, top right-->
  <div id="steamlogomainbox">
    <div id="steamlogobox">
      <img id="steamlogo" src="images/steamlogo.png">
    </div>
  </div>
</body>

</html>

Upvotes: 0

Views: 273

Answers (1)

VISHAL SINGH
VISHAL SINGH

Reputation: 661

overflow hidden not going to hide extra white bar in right side. Better I suggest you use clip-path or use this site for desire look. http://bennettfeely.com/clippy/

Upvotes: 1

Related Questions