css三角形

工作中常用的，就放在有道云里不是很方便，放这里当笔记本了。

css制作各角度三角形，没有的角度也可以用css3转换角度了,

直接上代码了。希望也可以帮助下其他的人

css样式：

.div-up {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right:25px solid transparent;
    border-bottom: 50px solid red;
}


.div-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid red;
}


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

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

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

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

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

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

html代码:

<article class="container" style="display:inline-block;">
<div class="col-sm-6">
  <p>上</p>
  <div class="div-up"></div>
  <p>下</p>
  <div class="div-down"></div>
  <p>左</p>
  <div class="div-left"></div>
  <p>右</p>
  <div class="div-right"></div>
</div>
<div class="col-sm-6">
    <p>上左</p>
  <div class="div-top-left"></div>
  <p>上右</p>
  <div class="div-top-right"></div>
  <p>下左</p>
  <div class="div-bottom-left"></div>
  <p>下右</p>
  <div class="div-bottom-right"></div>
</div>
</article>

 

 好了，自己可以copy到编辑器里运行看看。