实现过程:
正常的border
<div class="Box"></div> .Box { background: #ddd; width: 100px; height: 100px; border-top: 20px solid yellow; border-right: 20px solid red; border-bottom: 20px solid black; border-left: 20px solid blue; }
高度和宽度减小后的border
正常border表现为梯形,当Box的高度和宽度减小至0时,border则为三角形
.Box { background: #ddd; width: 0; border-top: 20px solid yellow; border-right: 20px solid red; border-bottom: 20px solid black; border-left: 20px solid blue; }
接下通过设置其他三个border的背景为透明则可以实现三角形
.Box { width: 0; border-top: 20px solid yellow; border-right: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid transparent; }
.Box { width: 0; border-top: 20px solid transparent; border-right: 20px solid red; border-bottom: 20px solid transparent; border-left: 20px solid transparent; }
.Box { width: 0; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid black; border-left: 20px solid transparent; }
.Box { width: 0; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid blue; }
参考:https://www.cnblogs.com/youhong/p/6530575.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。