代码之家 › 专栏 › 技术社区 › Ramesh Diego Lins de Freitas

半星体透明星

css-shapes svg css html

Ramesh Diego Lins de Freitas · 技术社区 · 7 年前

我需要在CSS中创建评级星,到目前为止我有两个要求,

半彩色星形。
有边框但身体透明的星星。

到目前为止,我可以用CSS创建一个全彩色的星星。但有了这个结构,我无法达到上述要求。

这就是我现在拥有的,我跟着这个 ANSWER 供我参考

.star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .9em;
  margin-right: .9em;
  margin-bottom: 1.2em;
  border-right: .3em solid transparent;
  border-bottom: .7em solid #FC0;
  border-left: .3em solid transparent;
  /* Controlls the size of the stars. */
  font-size: 24px;
}

.star:before,
.star:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: .6em;
  left: -1em;
  border-right: 1em solid transparent;
  border-bottom: .7em solid #FC0;
  border-left: 1em solid transparent;
  transform: rotate(-35deg);
}

.star:after {
  transform: rotate(35deg);
}

<p>
  <i class="star"></i>
  <i class="star half"></i>
  <i class="star transparent"></i>
</p>

1 回复 | 直到 7 年前

enxaneta 7 年前

根据您的要求,我将使用SVG。我就是这样做的:

.star{border:1px solid #d9d9d9; width:30px;}
.star{fill:gold; stroke:orange; stroke-width:5px;}
.star.full use:nth-child(2){display:none;}
.star.half use:nth-child(1),
.star.empty use:nth-child(2)
{display:none;}
.star.empty{fill:none;}

<svg viewBox="0 0 95.1 90.45" style="width:0; height:0; display:none">
<defs>  
<polygon id="half_star" points="47.6, 75 18.21, 90.45 23.82, 57.72 0.047, 34.55 32.9, 29.77 47.6, 0"></polygon>
<polygon id="star" points="47.6, 0 62.29, 29.77 95.15, 34.55 71.38, 57.73 76.99, 90.458 47.6, 75 18.21, 90.45 23.82, 57.73 0.05, 34.55 32.9, 29.77"></polygon>
</defs> 
</svg>

<svg viewBox="0 0 95.1 90.45" class="star full">
  <use xlink:href="#star" />
  <use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star half">
  <use xlink:href="#star" />
  <use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star empty">
  <use xlink:href="#star" />
  <use xlink:href="#half_star" />

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前