标签:赋值 设计 htm 纯css lock height top bottom 改变
纯CSS绘制三角形(各种角度),前阵子做的设计图里面有用到三角形,以前自学的时候漏掉了,暂且放这儿看看吧~通过改变border宽度 可以得到各种不同形状的三角形
//选择对应朝向的三角形的样式 赋值给clsaa即可
<div class="trian">
<div class="赋值到这里" ></div>
</div>
下面为把中可供选择的类
.up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ddd;
}
.down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #ddd;
}
.left {
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-right: 100px solid #ddd;
}
.right {
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-left: 100px solid #ddd;
}
.topleft {
width: 0;
height: 0;
border-top: 100px solid #ddd;
border-right: 100px solid transparent;
}
.topright {
width: 0;
height: 0;
border-top: 100px solid #ddd;
border-left: 100px solid transparent;
}
.bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid #ddd;
border-right: 100px solid transparent;
}
.bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #ddd;
border-left: 100px solid transparent;
}
标签:赋值 设计 htm 纯css lock height top bottom 改变
原文地址:https://www.cnblogs.com/loveliang/p/13589957.html