css3边框直斜角制作
使用CSS3制作直斜角边框
CSS3提供了多种方法实现直斜角边框效果，以下是几种常见实现方式：
使用clip-path属性
clip-path属性可以裁剪元素的显示区域，实现斜切效果：
.box {
width: 200px;
height: 100px;
background: #3498db;
clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
}这段代码会创建一个左侧20px斜切的矩形，通过设置四个顶点坐标控制形状。
使用transform: skew()
transform属性的skew()函数可以实现元素倾斜：
.skew-box {
width: 200px;
height: 100px;
background: #e74c3c;
transform: skewX(-20deg);
position: relative;
}注意这种方法会使内容也跟着倾斜，需要额外处理。
使用伪元素创建斜角
通过伪元素可以创建不破坏内容布局的斜角：
.pseudo-box {
width: 200px;
height: 100px;
background: #2ecc71;
position: relative;
overflow: hidden;
}
.pseudo-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: inherit;
transform: skewX(-20deg);
transform-origin: 0 100%;
}使用border-image属性
border-image结合SVG可以实现复杂斜角：
.border-image-box {
width: 200px;
height: 100px;
border: 20px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="0,40 20,0 40,40" fill="%232ecc71"/></svg>') 20 fill;
}使用CSS渐变
线性渐变可以模拟斜角效果：
.gradient-box {
width: 200px;
height: 100px;
background: linear-gradient(75deg, transparent 20px, #9b59b6 20px);
}每种方法各有优缺点：clip-path现代浏览器支持最好但可能影响点击区域；skew()简单但会影响内容；伪元素方法兼容性好但代码稍多；border-image适合复杂图案但需要额外资源；渐变方法轻量但只适合简单效果。根据项目需求选择最适合的方案。
