纯CSS绘制三角形
更新时间：2020-09-13 11:24:35 来源： 阅读量：
【摘要】 纯CSS绘制三角形考必过小编为大家整理了关于纯CSS绘制三角形的信息，希望可以帮助到大家！
纯CSS绘制三角形
标签：赋值设计htm纯csslockheighttopbottom改变
纯CSS绘制三角形（各种角度）,前阵子做的设计图里面有用到三角形，以前自学的时候漏掉了，暂且放这儿看看吧~通过改变border宽度 可以得到各种不同形状的三角形
html部分
//选择对应朝向的三角形的样式 赋值给clsaa即可
<p class="trian">
<p class="赋值到这里" ></p>
</p>
下面为把中可供选择的类
向上三角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绘制三角形的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！