昨天面试CSS做三角形,回答上来了,但是他接着问六边形,我当时没回答上来。
作者:互联网
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; padding: 0; } .wrapper{ left: 50%; margin-top: 200px; transform: translate(-50%,-50%); position: relative; } .one{ width: 50px; height: 86.8px; background-color: #4ac94a; /*设置绝对定位,使三个盒子叠在一起。*/ position: absolute; margin: 0 auto; left: 50%; top: 50%; } .one:nth-child(1){ /*逆时针旋转60度*/ transform: rotate(-60deg); } .one:nth-child(3){ /*顺时针旋转60度*/ transform: rotate(60deg); } </style> </head> <body> <!--在外面设置一个盒子,包裹六边形--> <div class="wrapper"> <div class="one"></div> <div class="one"></div> <div class="one"></div> </div> </body> </html>
标签:top,50%,回答,transform,child,上来,60deg,margin,CSS 来源: https://blog.csdn.net/qq_47997447/article/details/120844340