时间戳

首页 > 解决方案 > 我怎样才能在星形内写字

html - 我怎样才能在星形内写字

问题描述

在下面的代码中，我想在形状（星形）内写数字，但它出现在形状的侧面。我怎样才能实现这种情况。提前致谢

.Stars {
     --percent: calc(var(--rating) / 5 * 100%);
     display: inline-block;
     font-size: var(--star-size);
     font-family: Times;
     line-height: 1;
   margin-left:500px;
   background-color: red;
   
}
 .Stars::before {
     content: '★';
     background: linear-gradient(0deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
<div class="Stars" style="--rating: 2.5;--star-size: 60px;
  --star-color: #fff;--star-background: #fc0; text-align: center;" aria-label="Rating of this product is 2.3 out of 5.">3
</div>

标签： htmlcss

解决方案

您可以使用剪辑路径属性来做到这一点

.Stars{
  
   --percent: calc(var(--rating) / 5 * 100%);
     display: inline-block;
     font-size: var(--star-size);
     font-family: Times;
     line-height: 1;
   margin-left:500px;
   background-color: red;
  
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

}
<div class="Stars" style="--rating: 2.5;--star-size: 60px;
  --star-color: #fff;--star-background: #fc0; text-align: center;" aria-label="Rating of this product is 2.3 out of 5.">3
</div>

并且有网站可以帮助您制作形状：https ://bennettfeely.com/clippy/

推荐阅读