css 六边形中嵌套圆形旋转

最新推荐文章于 2021-08-04 07:58:25 发布

__lynn

最新推荐文章于 2021-08-04 07:58:25 发布

阅读量334

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_43986275/article/details/107460631

版权

本文介绍了一种使用CSS实现六边形并在其中嵌套旋转圆形的技巧，详细阐述了CSS3的使用方法，包括边框技巧、伪元素以及动画属性的应用，帮助开发者创建独特的视觉效果。

摘要由CSDN通过智能技术生成

效果：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 实现六边形图片展示效果</title>
    <style type="text/css">
        .hexagon {
   
            width:500px;
            height: 306px;
            background: #ff7675;
            position: relative;
            margin-top:300px;
            margin-left: 100px;
        }
        .hexagon:before {
   
            content: "";
            position: absolute;
            top: -150px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 250px solid transparent;
            border-right: 250px solid transparent;
            border-bottom: 150px solid #ff7675;
        }
        .hexagon:after {
   
            content: "";
            position: absolute;
            bottom: -150px;
            left: 0;
            <