css 方形倾斜 |css画空心五角星

/* 定义斜角 */
.selector {
/* 有时候需要添加 'deg' 单位 */
transform: skew(30deg);
}
/* 只旋转边框 */
.selector {
transform: skew(10deg);
}
.selector::before {
/* 对 ::before 和 ::after 元素实现效果 */
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 1px solid cyan;
transform: skew(-10deg);
}

上面是 CSS 方形倾斜的基本原理，接下来，大家结合代码实现具体应用。

/* 定义一个层叠模块 */
.box {
width: 200px;
height: 200px;
background-color: #f6f6f6;
position: relative;
z-index: 2;
}
/* 设置样式 */
.box:before {
content:"";
display:block;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
transform-origin: top right;
transform: skewY(-10deg);
z-index: -1;
background-color: #4bc1d2;
}

以上代码定义了一个层叠模块，并通过 `transform` 属性和 `transform-origin` 属性，定义了 CSS 方形倾斜的具体效果。

综上所述，CSS 方形倾斜是一个非常实用的技术，可以丰富你的页面元素变化，增加页面的动态感，并为用户带来更好的体验。