Question

我遇到溢出问题：隐藏了。我的页面顶部有2个徽标，底层有一个梯形。我基本上制作了2个平行四边形图并使用transform: skewX()使其以一定角度倾斜，然后overflow:hidden以确保侧面不会出现。

我的观点可以在这里看到：http://imgur.com/a/cAUUj

提供实时版本

提前谢谢！

我的代码如下：

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

溢出隐藏不会隐藏右侧的额外白条。但我建议你使用剪辑路径或使用此网站的欲望外观。 http://bennettfeely.com/clippy/

溢出：隐藏不起作用

1 个答案: