CSS3六边形的实现

最新推荐文章于 2024-06-24 10:48:58 发布

Eternal-memory

最新推荐文章于 2024-06-24 10:48:58 发布

阅读量2.6k

点赞数 1

分类专栏：前端开发经验之谈文章标签： html5-css3

本文链接：https://blog.csdn.net/liuxin_1991/article/details/78614694

版权

CSS3六边形的实现

一、独立的一个六边形的实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style>
            /*.box{width:300px;height:300px;border: 1px solid #000;}*/
            .box1,.box2,.box3,.box4{
                width: 200px;
                height: 250px;
                overflow: hidden;
            }
            .box1{
                visibility: hidden;
                transform: rotate(120deg);
            }
            .box2{
                visibility: hidden;
                transform: rotate(-60deg);
            }
            .box3{
                transform: rotate(-60deg);
                visibility: visible;
                background-color: #8d71bf;
            }
            .box4{
                display: block;
                position: relative;
            }
            .box4 a{
                display: inline-block;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -25px 0 0 -50px;
                border-radius: 3px;
                text-align: center;
                line-height: 50px;
                width: 100px;
                height: 50px;
                text-decoration: none;

最低0.47元/天解锁文章

Eternal-memory

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
CSS3六边形的实现

CSS3六边形的实现一、独立的一个六边形的实现<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <style> /*.box{width:300px;height:300px;border
复制链接

扫一扫

专栏目录