标签：color height width 三种 三角形 border transparent css E9FBE4
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');
}标签：color,height,width,三种,三角形,border,transparent,css,E9FBE4 来源： https://blog.51cto.com/u_15166492/2704203
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。