html响应式百分比怎么计算,响应式CSS三角形,百分比宽度

您可以使用偏斜和旋转的伪元素在链接下创建响应三角形：

DEMO(调整结果窗口大小，看看它如何反应)

三角形的宽高比与padding-bottom属性保持一致。

如果您希望形状根据其内容适应其大小，则可以删除.btn类的宽度

.btn {

position: relative;

display: inline-block;

height: 50px; width: 50%;

text-align: center;

color: white;

background: gray;

line-height: 50px;

text-decoration: none;

padding-bottom: 15%;

background-clip: content-Box;

overflow: hidden;

}

.btn:after {

content: "";

position: absolute;

top:50px; left: 0;

background-color: inherit;

padding-bottom: 50%;

width: 57.7%;

z-index: -1;

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transform: rotate(-30deg) skewX(30deg);

-ms-transform: rotate(-30deg) skewX(30deg);

transform: rotate(-30deg) skewX(30deg);

}

/** FOR THE DEMO **/

body {

background: url('http://i.imgur.com/qi5FGET.jpg');

background-size: cover;

}

Hello!

有关响应三角形的更多信息以及如何制作它们，您可以看一下

Triangles with transform rotate(简单而花式的三角形)