css使响应椭圆块 [英] css make responsive oval block
问题描述
我想为下面的图片中显示的数字做一个css块。我的想法/目标是使一个响应块,如果有一个数字,它将是圆的,如果两个,然后喜欢第二。我已经尝试使边界半径:50%所以第一块我成功做第二个不像在边框半径的图像:50%
所以我的问题是有可能使用一个类块或每个按钮(左|右)作出这样的结果我需要为每个块写特殊类?
固定高度解决方案
为此,你需要一个固定的高度(否则,你需要用jquery计算)。
您需要做的是这样的事情;
html,body {background:#222; } div {margin:10px; display:inline-block; height:30px; border-radius:25px;背景:lightblue; font-size:30px; min-width:30px; text-align:center; line-height:30px; padding:10px;位置:相对; color:blue;} div:before {content:; position:absolute; left:0; top:-10px; width:100%; border-top:3px solid tomato; }
< div> 1< / div> div> 123< / div>
注意:border-radius应该设置为这个的总高度的一半。
我还包括一个最小宽度,以确保它总是至少一个圆。
JQuery解决方案对于非固定高度
$ (document).ready(function(){$('div')。each(function(index){var height = $(this).height(); $(this).css(border-radius,height +px);});});
html,body {background:#222;} div {margin:10px; display:inline-block; border-radius:25px; background:lightblue; font-size:30px; min-width:30px; text-align:center; line-height:30px; padding:10px;位置:相对; vertical-align:top; color:blue;} div:before {content:; position:absolute; left:0; top:-10px; width:100%; border-top:3px solid tomato;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div> 1< / div>< div> 123< ; / div>< div>不是设置的高度,< br />任一:)< / div>
/ p>I am trying to make a css blocks for numbers shown in image below. My idea / goal is to make one responsive block so if there will be one number it will be round, if two then like second. I have been tried to make border-radius: 50% so the first block I succeed to do second was not like in image with border-radius: 50%
So my question is it possible to make such result with one class block or for each button (left | right) I need to write special class for each block ?
解决方案Fixed Height Solution
For this you will need a "fixed" height (otherwise, you'll need to calculate this with jquery).
What you'll need to do is something like this;
html,body{background:#222;} div { margin:10px; display: inline-block; height: 30px; border-radius: 25px; background: lightblue; font-size: 30px; min-width: 30px; text-align: center; line-height: 30px; padding: 10px; position:relative; color:blue; } div:before{ content:""; position:absolute; left:0; top:-10px; width:100%; border-top:3px solid tomato; }
<div>1</div> <div>123</div>
Note: The border-radius should be set to half the overall height for this.
I've also included a min-width to ensure it is always at least a circle.
JQuery Solution For non-fixed heights
$(document).ready(function() { $('div').each(function(index) { var height = $(this).height(); $(this).css("border-radius", height + "px"); }); });
html, body { background: #222; } div { margin: 10px; display: inline-block; border-radius: 25px; background: lightblue; font-size: 30px; min-width: 30px; text-align: center; line-height: 30px; padding: 10px; position: relative; vertical-align:top; color: blue; } div:before { content: ""; position: absolute; left: 0; top: -10px; width: 100%; border-top: 3px solid tomato; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>1</div> <div>123</div> <div>Not a set height, <br/>either :)</div>
这篇关于css使响应椭圆块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!