Draw Triangle Clipping Shape using CSS

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>