CSS可以方便地制作出各种样式的组件,十字架也不例外。下面我们将介绍两种不同的制作十字架的方法。/*第一种方法*/ .cross { width: 100px; height: 100px; bord
CSS可以方便地制作出各种样式的组件,十字架也不例外。下面我们将介绍两种不同的制作十字架的方法。
/*第一种方法*/ .cross { width: 100px; height: 100px; border: 5px solid #000; position: relative; margin: 50px auto; } .cross:before, .cross:after { content: ""; width: 100%; height: 5px; background-color: #000; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .cross:before { transform: rotate(45deg); } .cross:after { transform: rotate(-45deg); }
这个方法通过使用:before和:after伪元素来制作出十字架的两条直线,通过旋转来得到交叉的效果。同时给容器设置一个border来在四周留出空隙,让交叉部分单独呈现。
/*第二种方法*/ .cross2 { width: 100px; height: 100px; position: relative; margin: 50px auto; } .cross2:before, .cross2:after { content: ""; width: 5px; height: 100%; background-color: #000; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .cross2:before { transform: rotate(45deg); } .cross2:after { transform: rotate(-45deg); }
第二种方法与第一种类似,不同之处在于使用竖直的线来代替了较短的斜线,同时将竖直线的位置设置为容器的中间,再借助旋转实现十字交叉的效果。
粉丝
0
关注
0
收藏
0