使用CSS绘制三角形剪切形状

Question

我必须在我的网站上制作徽标形状。设计如下。我该如何开发？

对于徽标的第一部分，我使用CSS3 skew属性创建了它， 我摆弄了下面的链接。如何开发三角形部分和徽标的第三部分。三角形是滑块，因此内部图像应该改变。

https://jsfiddle.net/iamshajeer/x2og8utk/1/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

background-clip是您正在寻找的。看看这篇好文章：

https://css-tricks.com/clipping-masking-css/

这是一个帮助您生成形状的在线工具：

http://bennettfeely.com/clippy/

生成每个形状后，您可以将它们定位为您的图像。

Answer 2

您可以使用CSS变换将元素旋转并倾斜为菱形，然后反转子元素的变换。如果您在钻石上有overflow: hidden;并将钻石放在也包含overflow: hidden;的包装中，您可以使用CSS生成包含内容的剪裁三角形。

工作示例（Codepen）：

＆＃13;

＆＃13;

/* 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%);
}

＆＃13;

<div class="triangle-wrap">
	<div class="triangle">
		<div class="triangle-reset">
			<div class="triangle-content">
			</div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这不是你想要的完美而是接近那个。 右侧第一个看起来不太好。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望它有助于前进。

检查Fiddle.

Answer 4

您可以使用SVG（http://www.w3schools.com/svg/）绘制和定位形状，然后在它们上面应用CSS，如颜色和背景，以获得所需的效果。