我正在尝试用CSS绘制45度角,第一个图像是我想要实现的,第二个是我管理的.我无法弄清楚如何将角度的外侧再切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;
}
最佳答案
你应该使用旋转而不是倾斜.我还改变了你的位置：在元素之前,它的右下角与你的轻弹类的左下角对齐,然后将变换原点设置为共享角,创建你想要的效果(我也把它移开了)从顶部,所以效果将是可见的)：
.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;
}
原文链接：https://www.f2er.com/css/427388.html
