纯CSS绘制三角形-考必过

【摘要】纯CSS绘制三角形考必过小编为大家整理了关于纯CSS绘制三角形的信息，希望可以帮助到大家！

纯CSS绘制三角形

标签：赋值设计htm纯csslockheighttopbottom改变

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

html部分

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

下面为把中可供选择的类
2025年监理工程师-考点精讲班体验课
¥0
去购买

向上三角css，类名up

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

向下三角css，类名down

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

向左三角css，类名left

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

向右三角css，类名right

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

向上左三角css，类名topleft

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

向上右三角css，类名topright

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

向下左三角css，类名bottomleft

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

向下右三角css，类名bottomright

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

纯CSS绘制三角形

标签：赋值设计htm纯csslockheighttopbottom改变

以上就是纯CSS绘制三角形的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！