码迷,mamicode.com
首页 > Web开发 > 详细

纯CSS绘制三角形

时间:2020-09-12 21:25:25      阅读:55      评论:0      收藏:0      [点我收藏+]

标签:赋值   设计   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!