纯CSS绘制三角形

标签：赋值   设计   htm   纯css   lock   height   top   bottom   改变   

纯CSS绘制三角形（各种角度）,前阵子做的设计图里面有用到三角形，以前自学的时候漏掉了，暂且放这儿看看吧~通过改变border宽度 可以得到各种不同形状的三角形

html部分

//选择对应朝向的三角形的样式 赋值给clsaa即可
<div class="trian">
   <div class="赋值到这里" ></div>
</div>

下面为把中可供选择的类

向上三角css，类名up

.up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #ddd;
}

向下三角css，类名down

.down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #ddd;
}

向左三角css，类名left

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

向右三角css，类名right

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

向上左三角css，类名topleft

.topleft {
    width: 0;
    height: 0;
    border-top: 100px solid #ddd;
    border-right: 100px solid transparent;
}

向上右三角css，类名topright

.topright {
    width: 0;
    height: 0;
    border-top: 100px solid #ddd;
    border-left: 100px solid transparent;
}

向下左三角css，类名bottomleft

.bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid #ddd;
    border-right: 100px solid transparent;
}

向下右三角css，类名bottomright

.bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid #ddd;
    border-left: 100px solid transparent;
}

纯CSS绘制三角形

标签：赋值   设计   htm   纯css   lock   height   top   bottom   改变   

原文地址：https://www.cnblogs.com/loveliang/p/13589957.html