Draw Triangle Clipping Shape using CSS - html

Question

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>

Answer 1

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>

Answer 2

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.

Answer 3

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.

Answer 4

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.