CSS边框并非矩形重叠拼接，而是以梯形无缝拼接。
如下图：
实现代码：
.test1{ width: 20px; height: 20px; border-color: red green blue yellow; border-style: solid; border-width: 60px 60px 60px 60px;}如果只给其中两条边设置宽度，则未设置的边依然呈现矩形：
实现代码：
.test1{ width: 10px; height: 20px; border-color: red green blue yellow; border-style: solid; border-width: 60px 60px 0 0;}利用以上内容，可以利用一个边为彩色，其余边为透明，来显示一个梯形：
实现代码：
.test1{ width: 30px; height: 30px; border-color: transparent transparent red transparent; border-style: solid; border-width: 60px 60px 60px 60px;}同理可显示一个三角形：
实现代码：
.test1{ width: 0px; height: 0px; border-color: transparent transparent red transparent; border-style: solid; border-width: 60px 60px 60px 60px;}注意：以上实现均使用div（块级元素），如果使用的为行级元素，则可能出现显示不全的问题。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
