围绕可变高度的div制作一个完美的圆 [英] Make a perfect circle around a div of variable height
问题描述
我已经对此进行了相当多的研究,但似乎找不到一个好的,可靠的答案来找到如何围绕可变高度的div元素制作一个响应圆.
I've looked into this a fair bit but can't seem to find a good, solid answer to find how to make a responsive circle around a div element of variable height.
使用 vw
单位制作一个简单的响应圈很容易.
It's easy to make a simple responsive circle using vw
units.
<div style="height:20vw; width:20vw"></div>
但是,我希望使用元素的最小高度,并在该div周围有一个圆.
However, I'm looking to use a min-height of an element and have a circle around this div.
创建响应圆的另一种方法是使用类似下面的代码段,但是同样,我无法适应可变高度(同样,我不能将 vh
单位用作div的高度会改变.
Another way to create a responsive circle is using something like the snippet below, but again I can't adapt this to work for a variable height (again, I can't use vh
units as the div will change in height.
.square {
position: relative;
width: 10%;
background: gray;
border-radius: 50%;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="square">
<div class="content">
</div>
</div>
我正在尝试创建如下所示的内容,其中圆圈永远不会切入div的角(填充约10像素).我个人试图避免使用javascript,并且本来希望使用仅css的方法,但这似乎是不可避免的.也许唯一的解决方案是使用jquery来计算元素的高度,以将其应用于包装元素?
I am trying to create something like the below, where the circle will never cut into the corners of the div (with around a 10px padding). I personally was trying to avoid javascript and would have preferred a css only approach, but it seems it's unavoidable. Maybe the only solution is to use a jquery to calculate the height of the element in order to apply this to a wrapper element?
我正在玩这个游戏:
.square {
position: absolute;
top: 50%;
display: inline-block;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
<div class="square">
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
</div>
推荐答案
剪切路径
可以轻松地做到这一点.
Clip-path
can easily do this if you consider solid coloration.
调整元素的大小,圆圈将跟随:
Resize the element and the circle will follow:
.box {
width: 200px;
height: 200px;
overflow: hidden;
resize: both;
background: blue;
box-shadow: 0 0 0 200vmax red;
clip-path: circle(71%);
margin: 100px auto;
}
<div class="box"></div>
了解魔术数字的相关问题 71%
: clip-path:circle()半径不正确"t似乎计算正确了
Related question to understand the magic number 71%
: clip-path:circle() radius doesn't seem to be calculated correctly
要使用图像,我们可以考虑使用伪元素.您还可以依赖 calc()
添加偏移量:
To use an image we can consider pseudo elements. You can also rely on calc()
to add the offset:
.box {
width: 200px;=
resize: both;
clip-path: circle(calc(71% + 10px));
margin: 100px auto;
position: relative;
font-size:35px;
color:#fff;
}
/* the background layer */
.box::before {
content:"";
position: absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:blue;
}
/* the image layer */
.box::after {
content:"";
position: fixed; /* to make sure the image cover all the screen */
z-index:-2;
top:0;
bottom:0;
left:0;
right:0;
background:url(https://picsum.photos/id/1015/1000/1000) center/cover no-repeat;
}
<div class="box" contenteditable="true"> Edit this<br>text </div>
这篇关于围绕可变高度的div制作一个完美的圆的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!