overflow:hidden doesn't work
Question
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>
1 answers
solution1
1 ACCPTED 2017-03-21 06:27:06
overflow hidden not going to hide extra white bar in right side.Butter i suggest you use clip-path or use this site for desire look. http://bennettfeely.com/clippy/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.