发表于： 2019-06-22 23:21:41
1 812
今天完成的事：看任务资料，写出了第一个页面。
CSS3 2D转换和边框属性写出小三角型。
效果图：
代码如下：
步骤如下：
（1）设置盒子的width和height为0，边框为50px，此时效果如下
（2）然后将border的底部取消：
（3）最后设置border的左边和右边为白色：
一个三角形就画好了。
（4）在画一个和它差不多大的方块
用css3 2D：
转换将方块旋转45度。
这是菜鸟链接里面有详细介绍：https://www.runoob.com/css3/css3-2dtransforms.html
（方块边长尺寸可以精确计算根据实际情况根据等腰直角三角形三边比例
（5）定位属性让方块覆盖住三角形的一部分剩下的可见部分就是就是最终的效果，这是一个思路还可以做出其他行形状
（还可以直接用边框加旋转来做）
明天的计划：中午看两小时资料，开始做第二个界面。
遇到的问题：暂无。
收获：学会画三角形和小箭头。
返回列表
评论