形状切割html,html – 使用CSS绘制三角形剪切形状

您可以使用CSS变换将元素旋转并倾斜为菱形,然后反转子元素的变换.如果你有溢出：隐藏;在钻石上并将钻石放置在一个也有溢出的包装中：隐藏;你可以使用CSS生成一个包含内容的剪切三角形.

工作实例(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%);

}