Is it possible to use css to floating 'child' on 'parent'? Like ‘other’.Now it looks like the effect is just scaling 'child' instead of translation.
body{
height: 100vh;
overflow: hidden;
}
.space{
background: #000;
height: 100vh;
perspective: 1000px;
}
.layer{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotateX(85.8deg) rotateY(0.1deg) rotateZ(-45deg);
height: 50%;
width: 50%;
perspective: 1000px;
}
#parent{
background: #fff;
}
#other{
background: #aaa;
transform: translateX(-50%) translateY(-50%) translateZ(1050px) rotateX(72.8deg) rotateY(0.1deg) rotateZ(-45deg);
}
<body>
<div class='space'>
<div class='layer' id='parent'>
<div id='child' style="transform: translateZ(200px);background: #555;width: 50%; height: 50%;"></div>
</div>
<div class='layer' id='other'></div>
</div>
</body>
transform-style: preserve-3d;
working
Related
i have this, and i would like to keep the img normal and rotate the div to a parallelogram, which i managed like this
.parallelogram {
width: 180px;
height: 60px;
overflow: hidden;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left: 10px;
top: -10px;
}
<div class="parallelogram">
<div class="img">
<img src="https://archive.org/download/AILS-A79-7082/A79-7082.jpg" alt="">
</div>
</div>
My problem is that the img keeps its parent width.
even though i ask it to be 440px its 180px. and i dont understand why.
I tried with vw, and % and none of it works!
Thank you in advance
.parallelogram {
width: 180px;
height: 60px;
overflow: hidden;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
background-color:blue;/*added for testing*/
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left:-20px;
right:0px;
top:-10px;
background-color:red;/*added for testing*/
opacity: 0.5;/* makes overlap area purple*/
}
<div class="parallelogram">
<div class="img">
<img..../>
</div>
</div>
I made left:-20px; and right:0px; to make the img appear like parallelogram.
I found this Is there are way to make a child DIV's width wider than the parent DIV using CSS? so I wanted to give it try. I hope this helps.
For the image to take the width of the .img div, you also need this rule, since the <img> tag is a child of the div with class .img:
.img img {
width: 100%;
height: auto;
}
(height: auto; is actually not necessary, since it's the default)
ADDITION AFTER COMMENT:
You have to remove overflow: hidden; from the outer DIV:
.parallelogram {
width: 180px;
height: 60px;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
background-color: blue;
/*added for testing*/
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left: -20px;
right: 0px;
top: -10px;
background-color: red;
/*added for testing*/
opacity: 0.5;
/* makes overlap area purple*/
}
.img img {
width: 100%;
height: auto;
}
<div class="parallelogram">
<div class="img">
<img src="http://placehold.it/180x60/#0d0"/>
</div>
</div>
https://jsfiddle.net/nxbg7rq3/
In this example I need the .mask to be completely on top of the .screen. In Safari (and Chrome Mobile) that just doesn't want to work. I've tried a lot and am at the end of my tether.
It'd be nice to accomplish this without me having to change a lot of the structure that's already present in the jfiddle. Ta!
html
<div class="device">
<div class="perspective">
<div class="screen">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
<div class="mask"></div>
</div>
</div>
</div>
css
.container {
-webkit-backface-visibility: visible;
z-index: 0;
transform: translate3d(0px, 0px, 0px);
position: absolute;
top: 20%;
width: 200px;
height: 300px;
}
.device {
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: translate3d(-38%, -50%, 0) scale(1);
transform: translate3d(-38%, -50%, 0) scale(1);
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
}
.perspective {
perspective: 114.35897435897436em;
-webkit-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
width: auto
}
.screen {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 67.5% 50%;
transform-origin: 67.5% 50%;
-webkit-transform: translateY(-51%) scale(1.07) rotateY(34deg);
transform: translateY(-51%) scale(1.07) rotateY(34deg);
position: absolute;
top: 50%;
left: 2.5%;
width: 100%;
height: 100%;
overflow: hidden;
outline: 5px solid #fa5d86;
z-index: 0;
}
.screen img {
width: 400px;
height: 300px;
}
.mask {
-webkit-transform-style: flat;
transform-style: flat;
width: 200px;
height: 200px;
position: relative;
max-height: 100%;
border: 5px solid black;
z-index: 100;
}
You can use double .mask? Example:
<div class="container">
<div class="device">
<div class="mask" style="position: absolute;"></div>
<div class="perspective">
<div class="screen">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
<div class="mask" style="opacity: 0;"></div>
</div>
</div>
I have this and I want to make a cube with HTML & CSS only like in the above image. My best try:
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.square{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
float:left;
transform: skew(180deg,210deg);
position: absolute;
top: 43px;
}
.square2{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
float:left;
transform: skew(180deg,150deg);
position: absolute;
left:102px;
top: 43px;
}
.square3{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
float:left;
transform: skew(180deg,180deg);
position: absolute;
left: 51px;
top: -61px;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
According to your HTML, I get this JSFiddle. I just played with transform.
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.square{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: skew(180deg,210deg);
position: absolute;
top: 43px;
}
.square2{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: skew(180deg,150deg);
position: absolute;
left:102px;
top: 43px;
}
.square3{
width:114px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: 0px;
top: -32px;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
Updated CSS
.square3{
width:114px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: 0px;
top: -32px;
}
I changed transform CSS with this.
Extra: David Walsh has a cool animated version on an cube. Apart from the fact that it looks kinda cool, by fiddling with the settings you can learn quite a lot about it.
You can also achieve a cube with 3d transforms. This will give your cube a more realistic perspective. As if the cube was a real 3d shape like this:
In the following I used one div with 2 pseudo elements :
body {
perspective: 900px;
padding-bottom:50%;
}
div {
position: relative;
width: 20%;
padding-bottom: 20%;
margin: 0 auto;
transform-style: preserve-3d;
background: #C52329;
transform: rotateX(60deg) rotatez(45deg);
}
div:before, div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform-origin: -2% -2%;
background: inherit;
}
div:before {
top: 104%; left: 0;
transform: rotateX(-90deg);
}
div:after {
top: 0; left: 104%;
transform: rotateY(90deg);
}
<div></div>
CSS 3d cube with 6 faces:
This technique allows you to make a "real cube" with 6 faces:
body{
perspective-origin:50% -100%;
perspective: 900px;
overflow:hidden;
}
h1{position:absolute;font-family:sans-serif;}
.cube {
position:relative;
padding-bottom:20%;
transform-style: preserve-3d;
transform-origin: 50% 100%;
transform:rotateY(45deg) rotateX(0);
transition:transform 3s;
}
.cubeFace {
position: absolute;
left:40%;top:0;
width: 20%;height:100%;
margin: 0 auto;
transform-style: inherit;
background: #C52329;
box-shadow:inset 0 0 0 5px #fff;
transform-origin:50% 50%;
transform: rotateX(90deg);
backface-visibility:hidden;
}
.face2{
transform-origin:50% 50%;
transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform-origin:0 0;
background: inherit;
box-shadow:inherit;
backface-visibility:inherit;
}
.cubeFace:before {
top: 100%; left: 0;
transform: rotateX(-90deg);
}
.cubeFace:after {
top: 0; left: 100%;
transform: rotateY(90deg);
}
body:hover .cube{
transform:rotateY(405deg) rotateX(360deg);
}
<h1>Hover me:</h1>
<div class="cube">
<div class="cubeFace"></div>
<div class="cubeFace face2"></div>
</div>
Note that I didn't add the vendor prefixes in the examples. For more info about browser support and what vendor prefixes are needed according to your target audience, see canIuse for 3d transforms.
Basically, you want to do 2 transformations:
rotate the rectangle
squeeze it (skew it)
so basically, you need to do a transform: rotate(x) skew(y, y) and play a bit with size and placing.
here's a little demo I created, based on your own demo:
(I did remove the borders since they felt unneeded to me)
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.square{
width:100px;
height:100px;
background:#c52329;
float:left;
transform: skew(180deg,210deg);
position: absolute;
top: 43px;
}
.square2{
width:100px;
height:100px;
background:#c52329;
float:left;
transform: skew(180deg,150deg);
position: absolute;
left:102px;
top: 43px;
}
.square3{
width:110px;
height:110px;
background:#c52329;
float:left;
transform: rotate(45deg) skew(-15deg, -15deg);
position: absolute;
left: 46px;
top: -42px;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
First let me point out that a skew angle should be between -90deg and 90deg, non-inclusive. All of your skews fall way outside this range.
Limiting myself to sensible skew numbers, it turned out to be quite simple:
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.tile {
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
position: absolute;
}
.square{
transform: skewY(30deg);
top: 43px;
}
.square2{
transform: skewY(-30deg);
left:102px;
top: 43px;
}
.square3{
height: 58px;
left: 50px;
top: -18px;
transform: skew(60deg, -30deg);
}
<div class="mainDiv">
<div class="tile square"></div>
<div class="tile square2"></div>
<div class="tile square3"></div>
</div>
Job done. I've also tidied up the huge repetition of styles into a common class for you.
A single box and 2 pseudos can do this as well.
http://codepen.io/gc-nomade/pen/vGeajp
#square {
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: #C52329;
/*box-shadow: 0 0 5px;*/
width: 90px;
height: 150px;
margin: 5em;
position: relative;
transform: skew(30deg) rotate(30deg);
}
#square:before,
#square:after {
display: inherit;
align-items: center;
justify-content: center;
content: 'before';
position: absolute;
top: 0;
left: 2px;
right: -2px;
bottom: 0;
background: inherit;
border-radius: inherit;
box-shadow: inherit;
transform: translate(100%, -31%) skew(0, -45deg) rotate(0deg);
}
#square:after {
content: 'after';
top: -2px;
left: 0%;
height: 60%;
right: 0;
bottom: 2px;
transform: translate(50%, -100%) rotate(0deg)skew(-45deg)
}
<div id="square">
boxe
</div>
Use the following css for .square3:
.square3{
width:110px;
height:110px;
background:#c52329;
float:left;
transform: rotate(45deg) skew(-15deg, -15deg);
position: absolute;
left: 46px;
top: -42px;
}
Changing the CSS for .square3 should do it:
height: 58px;
left: 50px;
position: absolute;
top: -18px;
transform: skew(240deg, 150deg);
width: 100px;
https://jsfiddle.net/8vuj7peb/26/
I seen this and thought I would add something I came up with while trying to make some old fashioned abc blocks. Making them into 3d I only had to label the main container with another class to change positions and saved on the code. I commented the tutorial in the code. Hope this helps someone. :)
/*-------------------------------------------------------------
First we need to create our container for later reference
-I put this to show in the center of the screen if you wanted to
copy and paste the code into a document for play.
-The width is just to give the margin auto something to center on.
-You really on need the element itself to reference later, but this is prettier
-------------------------------------------------------------*/
.box{
width: 100px;
margin: 200px auto;
text-align: center;
line-height: 5;
}
/*---------------------------------------------------------------------------
The box-wrapper is our real hero container here. This is where we nail our box together.
-set this to relative position for child elements to reference to.
-transform-style is set to preserve-3d because I wanted to keep the look as the text turns with the box. You can also set this to flat, but its not near as cool.
---------------------------------------------------------------------------*/
.box-wrapper{
position: relative;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
/*-------------------------------------------------------------------------
Here I am just giving the box its needed dimesions and setting them to absolute so nothing gets any ideas of wandering off.
-PLEASE NOTE: the border has 2px and our w:98 h:98 making it a total of 100px. (this is important when we translate later)
-------------------------------------------------------------------------*/
.box-wrapper div{
width: 98px;
height: 98px;
position: absolute;
border: 2px solid black;
border-radius: 5px;
}
/*----------------------------------------------------------------------
Since our sides are 100px we only need to move our box sides 50px to get the edges to match up without gaps.
-Meaning "translate" moves to the position relative to your .box-wrapper. (You can play with this code to see it in action, try to take a visible section of the box and take it down 10).
-Also I use "rotate" y and x to turn our box sheets (.box-wrapper div's)
-----------------------------------------------------------------------*/
.front{
transform: translateZ(50px) rotateY(0deg);
}
.back{
transform: translateZ(-50px) rotateY(180deg);
}
.top{
transform: translateY(-50px) rotateX(90deg);
}
.bottom{
transform: translateY(50px) rotateX(-90deg);
}
.right{
transform: translateX(50px) rotateY(90deg);
}
.left{
transform: translateX(-50px) rotateY(270deg);
}
/*-----------------------------------------------------------------------
Then after all of this we can use our cool box-wrapper to turn this baby
Hope this is helpful! :) Enjoy!
-------------------------------------------------------------------------*/
.box .box-wrapper{
transform: rotateX(-30deg) rotateY(-40deg);
}
.box .box-wrapper div{
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bob the box builder</title>
<link rel="stylesheet" type="text/css" href="boxstyle.css">
<style>
</style>
</head>
<body>
<!--Create our box that holds our stuff -->
<div class="box">
<!--Create our real container that keeps our box sides nailed together-->
<div class="box-wrapper">
<!--Make our box sheets that we will nail together with css-->
<div class="front">Front</div>
<div class="back">Back</div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
</body>
</html>
y
|
|____ x
╱
z
Imagine a cube from the front side. What you can see? A square that comes out over the screen. So, for the front side, we have:
.front {
transform : translateZ(50px);
}
for the right side, we have a square that is rotated 90 degrees on Y-Axis and moved on own new Z-Axis:
.right {
transform : rotateY(90deg) translateZ(50px);
}
for the left side, we have a square that is rotated -90 degrees on Y-Axis and moved on own new Z-Axis:
.right {
transform : rotateY(-90deg) translateZ(50px);
}
for the top side, we have a square that is rotated 90 degrees on X-Axis and moved on own new Z-Axis:
.right {
transform : rotateX(90deg) translateZ(50px);
}
for the back side, we have a square that is rotated -180 degrees on Y-Axis and moved on own new Z-Axis:
.right {
transform : rotateY(-180deg) translateZ(50px);
}
Then, Just package them in a shape container class with transform-style: preserve-3d property:
.cube {
transform-style: preserve-3d;
}
finally, you can rotate your cube and see the CSS-3D magic.
.cube {
transform-style: preserve-3d;
transform: rotateX(-40deg) rotateY(45deg);
}
.cube {
transform-style: preserve-3d;
transform: rotateX(-40deg) rotateY(45deg);
}
.side {
position: absolute;
width: 100px;
height: 100px;
background: #c52329;
border: solid 3px white;
}
.front {
transform: translateZ(53px);
}
.top {
transform: rotateX(90deg) translateZ(53px);
}
.right {
transform: rotateY(90deg) translateZ(53px);
}
.left {
transform: rotateY(-90deg) translateZ(53px);
}
.bottom {
transform: rotateX(-90deg) translateZ(53px);
}
.back {
transform: rotateY(-180deg) translateZ(53px);
}
<div class="cube">
<div class="side front"></div>
<div class="side back"></div>
<div class="side right"></div>
<div class="side left"></div>
<div class="side top"></div>
<div class="side bottom"></div>
</div>
It is a full cube. For your approach, you can ignore the back, right, and bottom sides.
Thanks to css-tricks.com
I have this:
<div class="container">
<div class="page-container">
<div class="leftmenu">
</div>
<div class="content">
dada
</div>
</div>
https://jsfiddle.net/0r9ptmsr/
I want to make content element at same height with leftmenu only with CSS, without JS.
One simple solution is give position: relative; to parent container i.e. .page-container and position: absolute; to child.
And give height and width 100% to child div.
Working Fiddle
.page-container {
overflow: hidden;
position: relative;
}
.content{
height: 100%;
width:100%;
position: absolute;
}
in ".content" class, write "height : 1000px;"
give both of them same height for example 1000px;
.content, .leftmenu{
height: 1000px;
}
like this :
.container {
height: 100%;
overflow: hidden;
width: 100%;
}
.page-container { overflow: hidden; }
.leftmenu {
width: 230px;
float: left;
white-space: nowrap;
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
background-color: black;
}
.content {
margin-left: 230px;
background: #f3f4f6;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
background-color: yellow;
}
.content, .leftmenu{
height: 1000px;
}
<div class="container">
<div class="page-container">
<div class="leftmenu">
</div>
<div class="content">
dada
</div>
</div>
</div>
Try this
.container {
height: 100%;
overflow: hidden;
width: 100%;
}
.page-container { overflow: hidden; height:1000px; }
.leftmenu {
width: 230px;
float: left;
white-space: nowrap;
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
background-color: black;
height: 100%;
}
.content {
margin-left: 230px;
background: #f3f4f6;
height: 100%;
padding: 15px;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
background-color: yellow;
}
<div class="container">
<div class="page-container">
<div class="leftmenu">
</div>
<div class="content">
dada
</div>
</div>
</div>
Give the content height and box-sizing as
.content {
box-sizing: border-box;
height: 1000px;
}
I have to make a logo shape in my website. The design is given below. How do I develop that?
For the first part of the logo I have created it using CSS3 skew property,
I have fiddled the link below. How do I develop the triangle section and the third part of the logo. The triangle is slider, so images inside should change.
https://jsfiddle.net/iamshajeer/x2og8utk/1/
.logo-menu {
height: 76%;
left: 11%;
margin: 0 auto;
width: 80%;
}
.first-part {
display: inline-block;
left: 135px;
position: relative;
transform: skew(-22deg);
width: 180px;
}
.menu-1{
background:red
}
.menu-2{
background:blue
}
.menu-3{
background:yellow
}
<div class="logo-menu">
<div class="first-part">
<div class="menu-1" style="height: 167px;">
<h3>About Us</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Gallery</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Get in Touch with</h3>
</div>
</div>
</div>
You could use CSS transforms to rotate and skew an element into a diamond, and then reverse those transforms for the child elements. If you have overflow: hidden; on the diamond and position the diamond in a wrapper that also has overflow: hidden;, you could produce a clipping triangle with content using just CSS.
Working Example (Codepen):
/* Clip the bottom half of the diamond. */
.triangle-wrap {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
}
/* Rotate and skew to create a diamond. */
.triangle {
background: grey;
position: absolute;
bottom: -50%;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-transform: rotate(45deg) skew(20deg, 20deg);
-moz-transform: rotate(45deg) skew(20deg, 20deg);
-ms-transform: rotate(45deg) skew(20deg, 20deg);
transform: rotate(45deg) skew(20deg, 20deg);
}
/* Reset the skew and rotation. */
.triangle-reset {
width: 100%;
height: 100%;
position: relative;
-webkit-transform: skew(-20deg, -20deg) rotate(-45deg);
-moz-transform: skew(-20deg, -20deg) rotate(-45deg);
-ms-transform: skew(-20deg, -20deg) rotate(-45deg);
transform: skew(-20deg, -20deg) rotate(-45deg);
}
/* Create a content wrapper. */
.triangle-content {
background: url('http://placehold.it/400x400') no-repeat;
background-position: center center;
background-size: cover;
position: relative;
width: 120%;
height: 120%;
left: -10%;
bottom: 65%;
}
/* Visual aid. */
html {
min-height: 100%;
background: linear-gradient(to bottom, #336666 0%,#663366 100%);
}
<div class="triangle-wrap">
<div class="triangle">
<div class="triangle-reset">
<div class="triangle-content">
</div>
</div>
</div>
</div>
background-clip is what you're looking for. Check out this great article:
https://css-tricks.com/clipping-masking-css/
Here's an online tool to help you generate shapes:
http://bennettfeely.com/clippy/
After you generate each shape, you can position them to look like your image.
It is not perfect what you want but near to that.
Right side first div not looking good.
.third-part {
display: inline-block;
left: 500px;
position: relative;
transform: skew(22deg);
width: 180px;
}
.logo-menu {
height: 76%;
left: 11%;
margin: 0 auto;
width: 80%;
}
.first-part {
display: inline-block;
left: 135px;
position: relative;
transform: skew(-22deg);
width: 180px;
}
.menu-1{
background:red
}
.menu-10{
background: blue;
/* Skew */
left: -70px;
position: relative;
transform: skew(50deg);
width: 190px;
}
.menu-2{
background:blue
}
.menu-3{
background:yellow
}
.second-part {
top: 36%;
}
.second-part {
}
.second-part {
display: inline-block;
height: 100%;
left: 240px;
position: absolute;
top: 25%;
width: 520px;
}
.second-part .triangle-shape {
left: 4%;
margin: 0;
max-width: 700px;
position: absolute;
}
.wrap {
display: inline-block;
margin: 240px 0;
transform: rotate(45deg) translate3d(0px, 0px, 0px);
transition: transform 300ms ease-out 0s;
width: 500px;
}
.crop {
height: 465px;
margin: 0;
overflow: hidden;
position: relative;
transform: skew(22deg, 22deg) translate3d(0px, 0px, 0px);
width: 450px;
}
.crop img {
height: 650px;
left: -50%;
opacity: 1;
position: absolute;
top: -50%;
transform: skew(-20deg, -20deg) rotate(-45deg);
transition: opacity 300ms ease-in-out 0s;
width: 500px;
}
}
.second-part .triangle-shape {
left: 4%;
margin: 0;
max-width: 700px;
position: absolute;
}
.wrap {
display: inline-block;
margin: 240px 0;
transform: rotate(45deg) translate3d(0px, 0px, 0px);
transition: transform 300ms ease-out 0s;
width: 500px;
}
.crop {
height: 465px;
margin: 0;
overflow: hidden;
position: relative;
transform: skew(22deg, 22deg) translate3d(0px, 0px, 0px);
width: 450px;
}
.crop img {
height: 650px;
left: -50%;
opacity: 1;
position: absolute;
top: -50%;
transform: skew(-20deg, -20deg) rotate(-45deg);
transition: opacity 300ms ease-in-out 0s;
width: 500px;
}
<div class="logo-menu">
<div class="first-part">
<div class="menu-1" style="height: 167px;">
<h3>About Us</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Gallery</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Get in Touch with</h3>
</div>
</div>
<div class="second-part">
<div class="triangle-shape">
<div class="wrap">
<div class="crop">
<img alt="" src="http://s23.postimg.org/wlo0phrsb/triangle01.jpg">
<h2>Projects</h2>
</div>
</div>
</div>
</div>
<div class="third-part">
<div class="menu-10" style="height: 120px;">
<h3>Products</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Services</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Location Map</h3>
</div>
</div>
</div>
Hope it will help to move forward.
Check Fiddle.
You can use SVG (http://www.w3schools.com/svg/) to draw and position the shapes and then apply CSS over them like color and backgound to get the desired results.