Question

如何制作奇怪的形状图标“圆圈”？

问题：我在网站上有2个不规则形状的图标。我正在向他们添加padding，background-color和border-radius。在某些屏幕尺寸下，背景颜色看起来像一个圆圈，但在其他屏幕尺寸上，它看起来像一个椭圆形（我不想要）。

的jsfiddle： http://jsfiddle.net/CSS_Apprentice/gv2wne9o/

HTML：

<div class="left">
    <img src="http://placehold.it/83x111" alt="icon" />
</div>

<div class="right">
    <img src="http://placehold.it/83x111" alt="icon" />
</div>

CSS：

img {
    border-radius: 100%; 
    background-color: #555555; 
    padding: 10%;
}

Answer 1

使用jsFiddle：http://jsfiddle.net/gv2wne9o/1/（应用于两个图标之一）

在这种情况下，设置边界半径不会这样做。并且您需要设置左右填充而不使用顶部和底部填充，因为您的图标尺寸为椭圆形（83 * 111）。

假设您的图标是一个内嵌块元素，您可以使用以下代码确定要添加多少左右填充，直到元素的宽度等于高度。

var img = document.querySelector('img');
var padding = 0;

while(img.offsetWidth < img.offsetHeight){
    img.style.paddingLeft = (++padding)+"%";
    img.style.paddingRight = padding+"%";
}

Answer 2

Check this out

img{
  border-radius:0px;
  background-color: #555555; 
  padding: 10%;
  }

编辑：

定义正方形：具有四个相等的直边和四个直角的平面图。

你没有4个相等的边，所以你使用的是RECTANGLE。

Answer 3

兄弟，你正在放置＆＃34; border-radius：100％＆＃34;你还有什么期望？ border-radius必须是＆＃34; 1％ - 5％＆＃34;在网站上正确使用。当你提供如此高价值的任何地方时，＆＃34; border-radius：50％＆＃34;以上它将是椭圆形和＆＃34; 100％＆＃34;它（div）将是圈。问题是什么？

border-radius:5px

尝试将border-radius设置为这样，并且您将得到一个带有非尖端点的正确方形！希望，这解决了这个问题！快乐的编码！

如何将奇怪的形状图标变成“圆圈”？

3 个答案: