首页 / CSS / 三种纯css方式实现三角形
三种纯css方式实现三角形
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了三种纯css方式实现三角形，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6531字，纯文字阅读大概需要10分钟。
内容图文
1.利用 border 属性实现三角形
CSS：
.triangle{width:30px; height:30px; border-width:20px; border-style:solid; border-color:#e66161 #f3bb5b #94e24f #85bfda;
}triangle{width:30px; height:30px; border-width:20px; border-style:solid; border-color:#e66161 #f3bb5b #94e24f #85bfda;
}好的，现在我把它的宽和高都设为 0，看看有什么变化。
四个边框都变成三角形了，现在我再把它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色，就出来我们想要的三角形了，推荐把边框设置成透明，这样拓展性更好。
注：IE6下把边框设置成 transparent 时会出现黑影，并不会透明，把 border-style 设置成 dashed 可以解决。
CSS：
.triangle{width:0; height:0; border-width:20px; border-style:solid dashed dashed dashed; border-color:#e66161 transparent transparent transparent;
}triangle{width:0; height:0; border-width:20px; border-style:solid dashed dashed dashed; border-color:#e66161 transparent transparent transparent;
}如果我们想实现下图的效果该怎么办呢？很简单，做两个小三角，一个是背景色，一个是边框色，然后利用定位重叠在一起，记住他们的定位要相差一个像素。
HTML：
<div class="message-box"> <span>我是利用 border 属性实现的</span> <div class="triangle-border tb-border"></div> <div class="triangle-border tb-background"></div></div> class="message-box"> <span>我是利用 border 属性实现的</span> <div class="triangle-border tb-border"></div> <div class="triangle-border tb-background"></div></div>
CSS：
.message-box { position:relative; width:240px; height:60px; line-height:60px; background:#E9FBE4; box-shadow:1px 2px 3px #E9FBE4; border:1px solid #C9E9C0; border-radius:4px; text-align:center; color:#0C7823;
}
.triangle-border { position:absolute; left:30px; overflow:hidden; width:0; height:0; border-width:10px; border-style:solid dashed dashed dashed;
}
.tb-border { bottom:-20px; border-color:#C9E9C0 transparent transparent transparent;
}
.tb-background { bottom:-19px; border-color:#E9FBE4 transparent transparent transparent;
}message-box { position:relative; width:240px; height:60px; line-height:60px; background:#E9FBE4; box-shadow:1px 2px 3px #E9FBE4; border:1px solid #C9E9C0; border-radius:4px; text-align:center; color:#0C7823;
}
.triangle-border { position:absolute; left:30px; overflow:hidden; width:0; height:0; border-width:10px; border-style:solid dashed dashed dashed;
}
.tb-border { bottom:-20px; border-color:#C9E9C0 transparent transparent transparent;
}
.tb-background { bottom:-19px; border-color:#E9FBE4 transparent transparent transparent;
}猛击demo ?
2.利用”◆“字符实现三角形
字符实现也是要用两个字符用绝对定位去模拟，只是它不能模拟出三角形，它是个菱形，然后露出半个头，底色又和背景色一样，看上去就像是个三角形了。。
注意：它的大小是由 font-size 决定的，width 和 height 都决定不了，但最好还是加上，这样各个浏览器去生成这个字符的时候能保持一致，我们去写绝对定位的时候就不用写 hack 了。
HTML：
<div class="message-box"> <span>我是利用 ◆ 字符实现的</span> <div class="triangle-character tc-border">◆</div> <div class="triangle-character tc-background">◆</div></div> class="message-box"> <span>我是利用 ◆ 字符实现的</span> <div class="triangle-character tc-border">◆</div> <div class="triangle-character tc-background">◆</div></div>
CSS：
.message-box { position:relative; width:240px; height:60px; line-height:60px; background:#E9FBE4; box-shadow:1px 2px 3px #E9FBE4; border:1px solid #C9E9C0; border-radius:4px; text-align:center; color:#0C7823;
}
.triangle-character { position:absolute; left:30px; overflow:hidden; width:26px; height:26px; font:normal 26px "宋体"; // 字符的大小和字体也有关系哦！}
.tc-border { bottom:-13px; color:#C9E9C0;
}
.tc-background { bottom:-12px; color:#E9FBE4;
}message-box { position:relative; width:240px; height:60px; line-height:60px; background:#E9FBE4; box-shadow:1px 2px 3px #E9FBE4; border:1px solid #C9E9C0; border-radius:4px; text-align:center; color:#0C7823;
}
.triangle-character { position:absolute; left:30px; overflow:hidden; width:26px; height:26px; font:normal 26px "宋体"; // 字符的大小和字体也有关系哦！}
.tc-border { bottom:-13px; color:#C9E9C0;
}
.tc-background { bottom:-12px; color:#E9FBE4;
}3.利用 CSS3 transfrom 旋转 45 度实现三角形
先创建一个带 border 的 div ，设置好背景色和相邻的两个边框的颜色，然后选择 45 度，听着很简单是吗，但是利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案很头大，我是没看懂，有看懂的兄弟情赐教啊：）
注：IE6下无效。
HTML：
<div class="message-box"> <span>我是利用 css transfrom 属性字符实现的</span> <div class="triangle-css3 transform ie-transform-filter"></div></div> class="message-box"> <span>我是利用 css transfrom 属性字符实现的</span> <div class="triangle-css3 transform ie-transform-filter"></div></div>
CSS：
.message-box { position:relative; width:240px; height:60px; line-height:60px; background:#E9FBE4; box-shadow:1px 2px 3px #E9FBE4; border:1px solid #C9E9C0; border-radius:4px; text-align:center; color:#0C7823;
}
.triangle-css3 { position:absolute; bottom:-8px; bottom:-6px\0; left:30px; overflow:hidden; width:13px; height:13px; background:#E9FBE4; border-bottom:1px solid #C9E9C0; border-right:1px solid #C9E9C0;
}
.transform { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);
}/*ie7-9*/.ie-transform-filter {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477,M22=0.7071067811865475, SizingMethod='auto expand')";filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod='auto expand');
}message-box { position:relative; width:240px; height:60px; line-height:60px; background:#E9FBE4; box-shadow:1px 2px 3px #E9FBE4; border:1px solid #C9E9C0; border-radius:4px; text-align:center; color:#0C7823;
}
.triangle-css3 { position:absolute; bottom:-8px; bottom:-6px\0; left:30px; overflow:hidden; width:13px; height:13px; background:#E9FBE4; border-bottom:1px solid #C9E9C0; border-right:1px solid #C9E9C0;
}
.transform { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);
}/*ie7-9*/.ie-transform-filter {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477,M22=0.7071067811865475, SizingMethod='auto expand')";filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod='auto expand');
}
内容总结
以上是互联网集市为您收集整理的三种纯css方式实现三角形全部内容，希望文章能够帮你解决三种纯css方式实现三角形所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】