Question

有没有办法使这种东西变得流动，以便它与它的父母一起扩展，或者它需要什么来实现它..

enter image description here

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Demo</title>

    <style type="text/css">

        #circle-container {
            position: relative;
            width: 200px;
            height: 200px;
            border: solid 0px #333;            
        }
        .dimmensions {
            width: 100px;
            height: 100px;
        }
        .dimmensions2 {
            width: 113px;
            height: 113px;
        }
        .dimmensions3 {
            width: 105px;
            height: 105px;
        }
        .left {
            position: relative;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            background: #09f;
            float: left;
            height: 199.5px;
            top: 0;            
        }
        .left-inner {
            position: relative;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            background: #444;
            height: 175px;
            width: 90px;
            top: 12px;
            left: 15px;            
        }
        .left-inner-small {
            position: relative;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            background: #4cff00;
            height: 145px;
            width: 85px;
            top: 15px;
            left: 15px;            
        }
        .top-right {
            position: relative;
            border-top-right-radius: 100px;
            background: #666;
            float: right;            
        }
        .top-right-inner {
            position: relative;
            border-top-right-radius: 100px;
            background: #ffd800;
            float: right;  
            height: 90px;
            width: 85px;  
            top: 12px;
            right: 15px;                  
        }
        .top-right-inner-small {
            position: relative;
            border-top-right-radius: 100px;
            background: #808080;
            float: right;  
            height: 75px;
            width: 70px;  
            top: 15px;
            right: 15px;                  
        }
        .bottom-right {
            position: relative;
            border-bottom-right-radius: 100px;
            background: #333;
            float: right;            
        }
        .bottom-right-inner {
            position: relative;
            border-bottom-right-radius: 100px;
            background: #ff6a00;
            float: right;  
            height: 87px;
            width: 85px;    
            top: 0px;
            right: 15px;                               
        }
        .bottom-right-inner-small {
            position: relative;
            border-bottom-right-radius: 100px;
            background: #fff;
            float: right;  
            height: 72px;
            width: 70px;  
            top: 0px;
            right: 15px;                               
        }
        .center-small {
            position: absolute;
            border-radius: 125px;
            background: #ff6a36;     
            top: 44px;
            left: 44px;
            z-index: 999;    
        }
        .center-small-inner {
            position: absolute;
            border-radius: 125px;
            background: #333;     
            top: 4px;
            left: 4px;
            z-index: 9999;                
        }
        .center-text {
            z-index: 99999;
            position: absolute;            
            text-shadow: #000 0px 2px 1px;
            color: #555;
            font-size: 18px; 
            top: -12px;      
            left: -47px;  
            font-family: 'Impact';
            text-transform: uppercase;
        }
    </style>
</head>
<body>

    <div id="circle-container">
        <div class="dimmensions2 center-small">
            <div class="dimmensions3 center-small-inner"></div>
        </div>
        <div class="dimmensions left">
            <div class="dimmensions left-inner">
                <div class="dimmensions left-inner-small"></div>
            </div>
        </div>
        <div class="dimmensions top-right">
            <div class="dimmensions top-right-inner">
                <div class="dimmensions top-right-inner-small"></div>
            </div>
        </div>
        <div class="dimmensions bottom-right">
            <div class="dimmensions bottom-right-inner">
                <div class="dimmensions bottom-right-inner-small">
                    <span class="center-text">
                        CSS3<span style="color:#ffd800">+</span>HTML5
                    </span>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Answer 1

每个元素都从属于#circle-container。您已在所有元素中定义了固定宽度和高度。您可以将这些值计算为200px的宽度和高度的实际#circle-container的比例值，并将其更改为百分比结果。

示例：

    #circle-container {
        position: relative;
        width: 200px;
        height: 200px;
        border: solid 0px #333;            
    }

    .dimmensions {
        width: 100px;
        height: 100px;
    }

会变成：

    #circle-container {
        position: relative;
        width: 200px;
        height: 200px;
        border: solid 0px #333;            
    } 
    .dimmensions {
        width: 50%; //Proportional
        height: 50%;  //Proportional
    }

然后，调整#circle-container的大小会调整整个弧的大小。

CSS3流体弧+一些文字

1 个答案: