响应式 CSS 圆圈

问题描述 投票：0回答：5

目标：

响应式 CSS 圈子：

  1. 等半径刻度。
  2. 半径可以用百分比计算。
  3. 半径可以通过媒体查询来控制。

如果解决方案是javascript，我仍然需要模拟媒体查询触发器。我不需要媒体查询，但我确实希望能够在特定宽度下按百分比控制半径：

@media (max-width : 320px) 
{
    .x2{padding: 50%;}
}

@media (min-width : 321px) and (max-width : 800px)
{
    .x2{padding: 25%;}
}

@media (min-width: 801px)
{
    .x2{padding: 12.5%;}
}

这是我到目前为止所拥有的：

http://jsfiddle.net/QmPhb/

<div class="x1">
    <div class="x2">
        lol dude      
    </div>
    <div class="x2"></div>
    <div class="x2"></div>
    <div class="x2"></div>
</div>

.x1
{
    float:left;
    width:100%;
}

.x2
{
    display:block;
    float:left;
    padding: 12.5%;          //Currently being used to control radius.
    width:auto;
    height:auto;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
    text-align:center;
}

问题：

在此解决方案中，当内容添加到圆圈中时：

  • 当缩放超过可用填充时，形状会扭曲。
  • 增加半径的大小。

更新：

我在这里为此构建了一个可行的解决方案： 响应式 CSS 圆圈

html css responsive-design css-shapes
5个回答
14
投票

您不需要

@media
对此进行查询。这是我的尝试，纯CSS：

.x1 {
    overflow:hidden;
}
.x1 .x2 {
    display:block;
    float:left;
    padding: 12.5%;
    width:auto;
    height:auto;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
    text-align:center;
    position: relative;
}
.x1 .x2 span {
    position: absolute;
    width: 100%;
    left: 0;
    top: 48%;
    line-height: 1em;
    height: 1em;
    font-size: 100%;
    overflow: hidden;
}​

小提琴

全屏

7
投票

更短的代码

此解决方案减少了代码大小，但保留了功能。我保留了原来的

.x#
，删除了不需要的
.x0
、
.x3
和
.x6
。因此，在最终的解决方案中，您可能会重新编号（但我希望您看到被消除的内容）。

任何需要不同 

top
或 
left
设置的“分割”圆圈的作品都需要有一个满足或超过要覆盖的 
.x2 > div
选择器的选择器，因此我有 
.x2 > .x7
等。我的一些选择器。

（正如下面的评论中所指出的，Chrome 在赏金开始时发布的原始技术中存在错误问题。这并不能解决这些问题，因此请在另一个浏览器中查看以下内容。）

这是修改后的小提琴。

HTML

<div class="x1">
        <div class="x2">
                <!-- BEG Content -->
                <div class="x4">
                    dude
                </div>
                <div class="x7">
                    dude
                </div>
                <div class="x8">
                    dude
                </div>
                <div class="x5">
                    dude
                </div>
                <!-- END Content -->
        </div>
        <div class="x2"></div>
        <div class="x2"></div>
        <div class="x2"></div>
    </div>

CSS

.x1 {
    margin:0px auto;
}
.x2 {
    overflow:hidden;
    display:block;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}

/* BEG Content */
.x2 > div {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
}
.x4,.x5 {
    width:100%;
    height: 20%;
}
.x2 > .x7, .x2 > .x8 {
    width:50%;
    height: 60%;
    top: 20%;
}
.x4 {
    background-color:blue;
}
.x2 > .x5 {
    background-color:yellow;
    top: 80%;
}

.x7 {
    background-color:green;
}
.x2 > .x8 {
    background-color:orange;
    left: 50%;
}
/* END Content */
@media (max-width: 320px)
{
    .x2 {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .x2 {padding: 25%;}
}

@media (min-width: 801px)
{
    .x1 {width:800px}
    .x2 {padding: 12.5%;}
}

编辑：根据评论，OP似乎想要更像这个小提琴提供的控制（在Chrome中不起作用；OP在编辑时尚未回复我知道这是否是）所需或不需要的功能类型）。

5
投票

解决方案：

http://jsfiddle.net/WTWrB/

DIV结构：

我们在 

overflow:hidden
中使用 
.x2
来溢出 
.x3
中的背景颜色 子元素。

注意内容从 

.x3

内部开始 
<div class="x0">
    <div class="x1">
        <div class="x2">
            <div class="x3">
                <!-- BEG Content -->
                <div class="x4">
                    dude
                </div>
                <div class="x6">
                    <div class="x7">
                        dude
                    </div>
                    <div class="x8">
                        dude
                    </div>
                </div>                
                <div class="x5">
                    dude
                </div>
                <!-- END Content -->
            </div>
        </div>
        <div class="x2"></div>
        <div class="x2"></div>
        <div class="x2"></div>
    </div>
</div>

CSS：

@media (max-width: 320px)
{
    .x2 {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .x2 {padding: 25%;}
}

@media (min-width: 801px)
{
    .x1 {width:800px}
    .x2 {padding: 12.5%;}
}
.x0 {
    float:left;
    width:100%;
}
.x1 {
    margin:0px auto;
}
.x2 {
    overflow:hidden;
    display:block;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}
.x3 {
    position: absolute;
    width: 100%;
    left: 0;
    top:0;
    font-size: 100%;
    float:left;
    height:100%;
    background-color:red;
}
/* BEG Content */
.x3 div{float:left;}
.x4,.x5,.x6 {
    width:100%;
}
.x7,.x8 {
    width:50%;
    float:left;
    height:100%;
}
.x4,.x5,.x7,.x8 {
    text-align:center;
}
.x4 {
    background-color:blue;
    height:20%;
}
.x5 {
    background-color:yellow;
    height:20%;
}
.x6 {
    height:60%;
}
.x7 {
    background-color:green;
}
.x8 {
    background-color:orange;
}
/* END Content */

Responsive CSS Circles

0
投票

我知道这个解决方案与这里建议的有很大不同，但我仍然认为值得提出。

我使用图像作为蒙版来创建圆圈，并利用了以下事实：当将填充指定为百分比时，它是根据其父元素的宽度而不是高度来计算的。这使我能够创建一个完美的正方形。

按比例调整圆圈大小的演示此处

HTML代码

<div class="container">
    <img class="circle" src="circleImage.png">
</div>

CSS代码

.container {
    position: relative;
    float: left;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #bbb;

}

.circle { 
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: auto;
    z-index: 1;
}

@media (max-width: 320px) {
    .container { width: 100%; padding-bottom: 100%; }
}

@media (min-width: 321px) and (max-width: 800px) {
    .container { width: 50%; padding-bottom: 50%; }
}

@media (min-width: 801px) {
    .container { width: 25%; padding-bottom: 25%; }
}

根据您的问题将上述圆圈细分为多个部分的演示此处

0
投票

在此输入链接描述

enter image description here

<link rel="stylesheet" href="circle_percent.css">
<script defer src="circle_percent.js"></script>

<div class="circle-percent-config" 
     data-width="100" 
     data-background="#ffffff" 
     data-stroke="2"
     data-stroke-bg="#eeeeee" 
     data-stroke-color="orange"
     data-text-color="orange" 
     data-font-size="20"
     data-percent="56.6">
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.