<div></div> HTML代码 div { width: 0; height: 0; border-top: 10px solid red; border-right: 10px solid green; css代码 border-left: 10px solid blue; border-right: 10px solid pink; }
<div></div> HTML代码 div { width: 0; height: 0; border-style: solid; css代码 border-width: 10px; border-color: red transparent transparent transparent; }
主要是靠的border分开来写的那些属性,最重要的我觉得就是border-color能指定上右下左,这样想要哪个三角形,在border-color里换换位置就行了。
总结一下:
- 可以用css 的边框样式来模拟三角效果
- 把宽高设置为0;
- 4个边框的边框样式都要写,然后边框颜色只保留需要的,其他的颜色写透明也不能省略(要不就不显示了!);
- 为了兼容性,可以考虑加上font-size: 0; line-height: 0
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。