css制作三角形

Posted web_hwg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css制作三角形相关的知识,希望对你有一定的参考价值。

【转载地址】http://www.cnblogs.com/xiaofeixiang/p/5022570.html

原理:定义空div,宽高为0,看成是两横两竖的盒子,两横在上面,箭头指向哪,哪边边框就为0,两边的边框就会靠在一起,形成一个顶点,两边的边框颜色则透明,三角形就是中间重叠部分切出来的

html

<ul>
    <li class="row">
        <span>四个三角</span>
        <div class="triangle">
        </div>
    </li>
    <li class="row">
        <span>上三角</span>
        <div class="triangle-up">
        </div>
    </li>
    <li class="row">
        <span>下三角</span>
        <div class="triangle-down">
        </div>
    </li>
    <li class="row">
        <span>左三角</span>
        <div class="triangle-left">
        </div>
    </li>
    <li class="row">
        <span>右三角</span>
        <div class="triangle-right">
        </div>
    </li>
    <li class="row">
        <span>左下角</span>
        <div class="triangle-left-bottom">
        </div>
    </li>
    <li class="row">
        <span>右下角</span>
        <div class="triangle-right-bottom">
        </div>
    </li>
</ul>

CSS:

ul li
    list-style: none;
    float: left;
    margin-left: 30px;

.row span
    display: block;
    margin-bottom: 10px;

.triangle 
    width: 0;
    height: 0;
    border-top: 20px solid #EEB422;
    border-right: 20px solid #C0FF3E;
    border-bottom: 20px solid #A020F0;
    border-left: 20px solid #7CFC00;


.triangle-up 
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-bottom: 40px solid #A020F0;
    border-left: 20px solid transparent;


.triangle-down 
    width: 0;
    height: 0;
    border-top: 40px solid #EEB422;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;


.triangle-left 
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 40px solid #7CFC00;


.triangle-right 
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 40px solid #C0FF3E;


.triangle-left-bottom 
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid #7CFC00;


.triangle-right-bottom 
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-right: 40px solid #C0FF3E;

效果图:

以上是关于css制作三角形的主要内容,如果未能解决你的问题,请参考以下文章

如何制作边缘平滑的 CSS 三角形?

css制作三角形的原理是啥?

使用CSS3制作三角形小图标

css 三角形的制作

如何在不使用边框和图像的情况下在 div 上制作 CSS 三角形背景? [复制]

CSS3制作互动三角形