因此,我得到了一个带有字形图标的元素,并被要求使用html,css和提供的字体对其进行编码。现在,每个字形图标都有代码和连字。有人可以帮我吗?我应该如何开始对该元素进行编码。
最佳答案
SVG
可以使用SVG创建给定的形状。
您将必须学习很多SVG才能创建复杂的形状。
我将从the basics开始
.widget {
width: 300px;
height: 300px;
}
.pill {
stroke: #999;
stroke-width: 1;
}
.pill .top {
fill: Orange;
}
.pill .bottom {
fill: LightSeaGreen;
}
.pill .circ-outer {
fill: rgb(120, 50, 120);
}
.pill .circ-inner {
stroke: none;
fill: white;
}
.pill .cross {
stroke: rgb(120, 50, 120);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.handle {
stroke: #999;
fill: #555;
}
.ribble {
stroke: #777;
stroke-linecap: round;
stroke-linejoin: round;
}
<svg class="widget" viewBox="0 0 100 100">
<defs>
<filter id="drop">
<feOffset in="SourceAlpha" dx="0" dy="0.2" result="off" />
<feGaussianBlur result="blurOut" in="off" stdDeviation="0.5" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<path class="handle" d="m35,16
a 5 10 0 0 1 0,70"/>
<line class="ribble" x1="43" y1="43" x2="43" y2="57" filter="url(#drop)"/>
<line class="ribble" x1="45" y1="45" x2="45" y2="55" filter="url(#drop)"/>
<line class="ribble" x1="47" y1="47" x2="47" y2="53" filter="url(#drop)"/>
<g class="pill">
<path class="top" d="m10,50 0,-30
a 5 5 0 0 1 30 0 v 30" />
<path class="bottom" d="m10,50 0,30
a 5 5 0 0 0 30 0 v -30" />
<circle class="circ-outer" cx="25" cy="50%" r="15" />
<circle class="circ-inner" cx="25" cy="50%" r="10" filter="url(#drop)" />
<polyline class="cross" points="30,50 20,50 25,50 25,55 25,45" />
</g>
</svg>
关于html - 使用html,CSS和提供的字形的设计和UI元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30671587/