Question

我正在尝试为公司徽标编写一些CSS，这是对公司服务器上当前jpg的相当准确的描述。除了徽标上的一些颜色叠加外，它非常基本。

我的问题是：这有可能吗？如果是这样我怎么能这样做

请不要猛击，我是一个总菜鸟，我的第一行html是大约一个星期前...

这是我的标记

<html>

<head>
    <meta charset="utf-8"/>
    <title>

    </title>
    <link rel="stylesheet" href="css/stylesheet.css"
</head>
<style contenteditable="">
#infinity {
position: absolute;
width: 212px;
height: 100px;
 -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
}

 #infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;    
border: 15px solid;
-moz-border-radius: 50px 50px 0 50px;
     border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
#infinity:before{
color: #ADB2B3;
}
#infinity:after {
left: auto;
right: 15;
color: #A99055;
-moz-border-radius: 50px 50px 50px 0;
     border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
        transform: rotate(45deg);
}                       
                                    </style>
<body>
<br>
<br>
<div>
<div>   
    <div style="float:left; margin-right: 0px;"id="infinity">
</div>

<div>
    <p style="float:left; margin-top:70px; margin-left:130px; font-size:60px;                 
         font-family: Avenir, sans-serif;">
    PORTFOLIO
    </p>
</div>

  </div>
  </body>
  </html>

Answer 1

检查出来：http://jsfiddle.net/tMEqk/1/

它不在那里，但它更接近

我制作了一个相对定位的容器，然后从那里抽出每个循环，根据盒子定位所有东西。更改边框以获得连续效果，然后遮挡由金盒生成的对角线。也没有轮换，但如果你想改变大小，那么就需要做一些数学计算。在Chrome中，它还没有检查过其他浏览器。

修改我并不完全容忍这个，但我确实喜欢尝试重新创建它。这应该是一个图像，您可以通过保存并将其作为本地文件引用来防止损坏的图像。

Answer 2

我是直的。您正在尝试使用CSS创建整个徽标？它是否正确？如果是这样，为什么CSS与使用JPEG？如果您使用的是直接CSS，那么您将无限制地使用它，而且大部分都是CSS3和浏览器黑客，这会带来一些问题。

第一个是CSS3仅在现代浏览器中受支持。第二个是浏览器黑客攻击没有通过W3 CSS验证。

Answer 3

这不是一个答案，实际上，但我强烈建议您最多可以使用Inkscape或此类程序尝试使用该徽标制作可缩放的矢量图像。此徽标将很容易转换为SVG（可缩放矢量图形）。但正如Kris所说，使用CSS完成所有这些工作可能无法在许多情况下按预期执行。

自定义CSS颜色叠加

3 个答案: