【发布时间】：2013-11-18 20:10:45
【问题描述】：
如何仅使用纯 CSS 创建任意曲线？有“贝塞尔”图书馆吗？我没有找到任何可以匹配下面徽标外边缘的曲线的东西。
看着the Shapes of CSS，我认为徽标可以近似为 2 个粉红色和黑色长方形，边缘完全圆润，倾斜 45 度，中间有 3 个白色小圆圈，矩形两侧有一些大圆圈给那个小“凹痕”。
这个形状真的可以只用圆形吗？
更新：这是我目前想出的（这里是JSFiddle）：
<span class='grey logo'>
<span class='black circle' id='left_middle'> </span>
<span class='grey circle' id='left_top'> </span>
<span class='grey circle' id='left_bottom'> </span>
<span class='left black circle'> </span>
<span class='left white small circle'> </span>
<span class='top grey circle' id='left_right'> </span>
<span class='pink circle' id='right_middle'> </span>
<span class='top pink circle'> </span>
<span class='top white small circle'> </span>
<span class='right pink circle'> </span>
<span class='right white small circle'> </span>
<span class='grey circle' id='right_top'> </span>
<span class='grey circle' id='right_bottom'> </span>
</span>
和：
/* normalize CSS */
.logo, .logo *, .logo *:before, .logo *:after {
display: block;
margin: 0;
padding: 0;
background: transparent;
font: normal normal 0/0 serif;
border: 0;
outline: 0;
}
.logo {
position: relative;
overflow: hidden;
margin: 0 0;
width: 500px;
height: 500px;
}
.logo * {
position: absolute;
}
/* colors */
.logo [class*=pink] {
background-color: rgb(217, 27, 91);
}
.logo [class*=white] {
background-color: white;
}
.logo [class*=black] {
background-color: black;
}
[class*=grey] {
background-color: rgb(240, 240, 240)
}
/* shapes */
.logo [class*=circle] {
width: 100px;
height: 100px;
border-radius: 50px;
-moz-border-radius: 50;
-webkit-border-radius: 50px;
}
.logo [class*=small] {
margin-left: 20px;
margin-top: 20px;
width: 60px;
height: 60px;
}
/* positions */
.logo [class*=top] {
left: 108px;
top: 8px;
}
.logo [class*=left] {
left: 46px;
top: 70px;
}
.logo [class*=right] {
left: 170px;
top: 70px;
}
.logo #left_middle {
left: 76px;
top: 40px;
}
.logo #right_middle {
left: 140px;
top: 40px;
}
.logo #left_top {
left: 13px;
top: -25px;
}
.logo #right_top {
left: 203px;
top: -25px;
}
.logo #left_bottom {
left: 141px;
top: 103px;
}
.logo #right_bottom {
left: 75px;
top: 103px;
}
.logo #left_right {
margin-left: -5px;
margin-top: -5px;
width: 110px;
height: 110px;
}
现在的问题是，无论我如何排列我的元素，堆叠总是乱七八糟。
问题来自GCI 2013。
【问题讨论】：
-
我猜除非你是MC Escher，否则你将无法用纯CSS解决问题。这是 SVG 或 Canvas 的经典案例。
-
@Christoph 我的任务特别要求只使用 CSS（可能还有 SASS 或其他 CSS 扩展）。
-
为什么你只限于 CSS？在 SVG 中创建它是没有问题的，它也可以在每个现代浏览器中正常工作。它可以很容易地嵌入到 HTML 页面中。我认为 css 在这里行不通。
-
@Christoph 我的原始近似值足够好吗？
-
@Christoph 再次，我有 SVG。我意识到 SVG 支持变得更好了，但我的任务需要一个 CSS 徽标。
标签： image css stylesheet graphical-logo