与CSS3绘制45度角度

我试图用CSS绘制45度角，第一个图像是我想要实现的，第二个是我管理的。我无法弄清楚如何将角度的外侧再削减45度（见红色虚线）。与CSS3绘制45度角度

.flick .text { 
 
    position: relative; 
 
    z-index: 50; 
 
} 
 
.flick { 
 
    background-color: #055468; 
 
    color: white; 
 
    margin-left: 140px; 
 
    padding: 15px; 
 
} 
 
.flick:before { 
 
    background: #055468; 
 
    content: ""; 
 
    height: 100px; 
 
    margin: -65px 0 0 -90px; 
 
    position: absolute; 
 
    transform: skew(45deg); 
 
    width: 80px; 
 
}

<div class="flick"><span class="text">Hello world</span></div>

来源

2016-06-13 Scott

你可能真的想看看'rotateZ'，而不是'skew'，因为这是在行动歪斜效果... – somethinghere

@在这里感谢你，是的chaning转换：rotateZ（45deg）;并改变宽度/边缘的作品完美！ – Scott

Ow darnit我只是做了一个例子:(好吧，看看我的答案在下面，祝你好运！ – somethinghere

您应该使用rotate而不是skew这一点。我还更改了:before元素的位置，使其右下角与flick类的左下角对齐，然后将transform origin设置为共享角，从而创建出您想要的效果（我也将它从顶部，这样效果会可见）：

.flick .text { 
 
    position: relative; 
 
    z-index: 50; 
 
} 
 
.flick { 
 
    margin-top: 200px; 
 
    background-color: #055468; 
 
    color: white; 
 
    margin-left: 140px; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 
.flick:before { 
 
    background: #055468; 
 
    content: ""; 
 
    width: 100px; 
 
    height: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 100%; 
 
    transform: rotateZ(45deg); 
 
    transform-origin: bottom right; 
 
    width: 80px; 
 
}

<div class="flick"><span class="text">Hello world</span></div>

来源

2016-06-13 15:33:34 somethinghere

完美，非常感谢。 – Scott

与CSS3绘制45度角度

回答

相关问题