【问题标题】:Is it possible to rounded shapes? Shapes such as hexagon, octagon? [closed]可以做成圆形吗?六边形、八边形等形状? [关闭]
【发布时间】:2013-02-02 18:32:37
【问题描述】:

一段时间以来,我一直在尝试圆角六边形,但是我发现我的方法都不起作用。各位大侠有什么建议吗?

【问题讨论】:

标签: html css shapes


【解决方案1】:

http://jsfiddle.net/9BTTQ/4/

HTML

<div class="hexagon">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS

.hexagon {
    position: relative;    
}

.hexagon > DIV {
    position: absolute;
    top: 0;
    left: 48px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    width: 64px;
    height: 96px;
    background-color: blue;
}

.hexagon > DIV:nth-child(2) {
    -moz-transform: rotate(60deg);
    -ms-transfrom: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

.hexagon > DIV:nth-child(3) {
    -moz-transform: rotate(120deg);
    -ms-transfrom: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}

注意事项:

  • 这可能会更好地使用 SVG 或画布来完成,除非它是一个孤立的需要。创建一堆元素来形成一个形状既没有语义又很乏味。

  • 由于transformborder-radiusnth-child,IE 7/8 根本无法运行。

  • 您会注意到边框半径大小、宽度和高度之间的简单数学关系。

  • This site 展示了许多其他可以生成的有趣形状。

【讨论】:

  • 嗨蒂姆梅多拉。我有一个关于“边界半径大小、宽度和高度之间的简单数学关系”的问题,你能帮我找出关系吗?提前致谢。
  • @DonovanCharpin - 这是一个修改后的小提琴,它演示了这些关系:jsfiddle.net/9BTTQ/91。高度 = 宽度 * 1.5,边框半径 = 宽度 * .25。老实说,我不确定 为什么 背后的几何形状适用于由三个相等矩形组成的圆角六边形。
  • 感谢您的快速答复。在这个website中,如果边长等于100,那么短对角线大约是173,所以比例是height = width * 1.73。对于边框半径,我找不到符合高度和宽度的值......在jsFiddle中,我可以写border-radius: 1em / 0.5em;,它的工作原理与example完全一样。但是我的最新版本的 lessCSS 有一个问题,它计算 2em,它与 1em / 0.5 不同......该死。 jsFiddle已更新
  • 你是想划分边界半径,还是在不同边设置不相等的值?在纯 CSS 中,1em / .5em 在矩形的边上设置不同的边框半径。 LESS CSS 将分割该表达式,导致不同的结果。要在纯 CSS 中划分,您需要 calc(1em / .5)
  • 我想保留border-radius: 1em / 0.5em;,但没有calc(),更少计算2em。所以我不能用less...得到这个表达式border-radius: 1em / 0.5em;...
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-04-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多