CSS 实现三角形

1、利用 border 属性实现三角形

这个原理很简单，我我们先看下面的图，这是一个边框为 20px 的 div，看他的边框，是个梯形，变化会从这里开始。

image

.triangle{
    width: 30px;
    height: 30px;
    border-width: 20px;
    border-style: solid;
    border-color: #e66161 #f3bb5b #94e24f #85bfda;
}

好的，现在我把它的宽和高都设为 0，看看有什么变化。

image

四个边框都变成三角形了，现在我再把它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色，就出来我们想要的三角形了，推荐把边框设置成透明，这样拓展性更好。

.triangle{
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid dashed dashed dashed;
    border-color: #e66161 transparent transparent transparent;
}

image

空心的三角形呢同理，在当前的三角形后面添加一个一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割

2、利用 CSS3 transfrom 旋转 45 度实现三角形

先创建一个带 border 的 div ，设置好背景色和相邻的两个边框的颜色，然后选择 45 度，听着很简单是吗，但是利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案很头大，我是没看懂，有看懂的兄弟情赐教啊：）
注：IE6下无效。

image

<div class="message-box">
    <span>我是利用 css transfrom 属性字符实现的</span>
    <div class="triangle-css3 transform ie-transform-filter"></div>
</div>
<style>
.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;
    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');
}
</style>

带阴影效果的三角形

image

<div class="box"></div>
.box {
      position: relative;
      width: 600px;
      height: 400px;
      background: #fff;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 2px #ccc;
}
.box:after {
      position: absolute;
      display: inline-block;
      top: 380px;
      left: 300px;
      width: 0;
      height: 0px;
      content: '';
      border-style: solid;
      border-width: 20px;
      border-color: #fff #fff transparent transparent;
      transform: rotate(135deg);
      box-shadow: 2px -2px 2px #ccc;
}

<div class="triangle"></div>

.triangle {
    width: 0px;
    height: 0px;
    border-top: 0 solid transparent;
    border-bottom: 100px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

image.png