• css-六边形、平行四边形、扇形实现


     六边形 css实现:

    先看结构 

    可以看出是三个div进行组合 形成六边形 通过overflow: hidden; 最终展示出六边形

    按照这个思路 画出三个矩形 

    完整代码:

    <style>
            .content {
                 200px;
                margin: 200px auto;
            }
    
            .item {
                position: relative;
                 320px;
                margin: 0 auto;
    
            }
    
            .bg {
                position: absolute;
                z-index: -1;
                top: 77px;
                left: 20px;
                height: 215px;
            }
    
            .img_box {
                 250px;
                height: 300px;
                overflow: hidden;
                transform: rotate(120deg);
                margin-left: 56px;
            }
    
            .img_box_child {
                 100%;
                height: 100%;
                overflow: hidden;
                transform: rotate(-60deg);
            }
    
            .img_box_child_child {
                 100%;
                height: 100%;
                overflow: hidden;
                transform: rotate(-60deg);
                background: url(img/guestdetails/guest_penson_2.png) center;
            }
        </style>
    html 
     <div class="item">
                <div class="img_box">
                    <div class="img_box_child">
                        <div class="img_box_child_child"></div>
                    </div>
    
                </div>
                <img src="img/guest_bg.png" alt="" class="bg">
            </div>
    

      平行四边形 利用skew可以简单实现:

    //大盒子
         3.0885rem;
        height: 3.0885rem;
        background: #EA5A45;
        color: #fff;
        transform: skew(-15deg);
    

      内容:(内容要倾斜回来)

        transform: skew(15deg);
    

      

     扇形的实现

    草图如下

    我思考的方法 ,首先这是一个圆中包含五个扇形,这里就遇到一个问题 扇形 如何绘制出来  (其实做的不是扇形,而是圆形盒子overflo:hidden 出来的假象 )

    下面解释一下(基于一种css3的方法)

    html结构 由两部分组成  包裹容器的盒子 以及 5个扇形

     <div class="rotate" id="rotate" >
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
    </div>
    

      

    首先 每一个模块 都是一个矩形,通过旋转角度 来实现角度的划分

    .rotate {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -250px;
                margin-top: -250px;
    
                 500px;
                height: 500px;
                border-radius: 50%;
                /*将溢出部分隐藏,达到扇形的效果*/
                overflow: hidden;
            }
            /*
                skewy 的角度计算方法
                圆形 360deg 5个部分  360/5=72度 72-90=-18deg 
                rotate 角度计算方法
                360deg 5个部分  分别为 0-72     (deg)
                                    72-144 
                                    144-216
                                    216-288
                                    288-360
                */
            .rotate span:first-child {
                transform: rotate(360deg) skewY(-18deg);
                background: plum;
            }
            .rotate span:nth-child(2) {
                transform: rotate(72deg) skewY(-18deg);
                background: yellow;
            }
            .rotate span:nth-child(3) {
                transform: rotate(144deg) skewY(-18deg);
                background: pink;
            }
            .rotate span:nth-child(4) {
                transform: rotate(216deg) skewY(-18deg);
                background: paleturquoise;
            }
            .rotate span:last-child {
                transform: rotate(288deg) skewY(-18deg);
                background: palevioletred;
            }
            .rotate span{
                display: block;
                overflow: hidden;
                position: absolute;
                top: 0;
                right: 0;
                /*宽高为容器的一半  中心偏移 为圆心位置 */
                 50%;
                height: 50%;
                transform-origin: 0 100%;
            }
  • 相关阅读:
    VirtualBox 命令行操作
    [大数据入门]实战练习 安装Cloudera-Hadoop集群
    DB2 Package Issues and Solution
    关于《阿里巴巴Java开发规约》插件的安装与使用
    Spring学习笔记:Spring概述,第一个IoC依赖注入案例
    SpringMVC:系统认识一下maven
    利用JS提交表单的几种方法和验证(必看篇)
    a标签调用js的几种方法
    使用BigDecimal进行精确运算
    Maven中settings.xml的配置项说明
  • 原文地址:https://www.cnblogs.com/GoTing/p/13522381.html
Copyright © 2020-2023  润新知