形状符号内的内容/数字

我想将内容放在星形符号内。发现它很难只使用css而不是svg。我试过这样的：https://css-tricks.com/examples/ShapesOfCSS/但它不起作用。一种方法是使用SVG，但他们很难响应，因为我需要在那里有额外的jquery/js功能。所以想知道是否有其他方法来实现这一点。形状符号内的内容/数字

来源

2017-07-27 Nikola Noxious Dimitrov

多少分，你想在你的星型？ – weBBer

您可以使用clip path（Clippy是一个很好的生成器）创建星号，并使用伪元素垂直对齐文本。

注意：DOM元素上的剪辑路径目前仅支持Chrome，Firefox及其移动版本。

.star { 
 
    height: 100px; 
 
    width: 100px; 
 
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
 
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
 
    text-align: center; 
 
    background: red; 
 
    color: white; 
 
} 
 

 
.star::before { 
 
    display: inline-block; 
 
    height: 100%; 
 
    background: blue; 
 
    vertical-align: middle; 
 
    content: ''; 
 
}

<div class="star">100</div>

来源

2017-07-27 09:15:41

你可以包装在一个容器中的明星与一些flexbox性质。添加您的内容，并使用position: absolute使其居中......

代码星从css tricks

.wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100%; 
 
    height: 100vh; 
 
} 
 

 
#star-five { 
 
    margin: 50px 0; 
 
    position: relative; 
 
    display: block; 
 
    color: red; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 70px solid red; 
 
    border-left: 100px solid transparent; 
 
    -moz-transform: rotate(35deg); 
 
    -webkit-transform: rotate(35deg); 
 
    -ms-transform: rotate(35deg); 
 
    -o-transform: rotate(35deg); 
 
} 
 

 
#star-five:before { 
 
    border-bottom: 80px solid red; 
 
    border-left: 30px solid transparent; 
 
    border-right: 30px solid transparent; 
 
    position: absolute; 
 
    height: 0; 
 
    width: 0; 
 
    top: -45px; 
 
    left: -65px; 
 
    display: block; 
 
    content: ''; 
 
    -webkit-transform: rotate(-35deg); 
 
    -moz-transform: rotate(-35deg); 
 
    -ms-transform: rotate(-35deg); 
 
    -o-transform: rotate(-35deg); 
 
} 
 

 
#star-five:after { 
 
    position: absolute; 
 
    display: block; 
 
    color: red; 
 
    top: 3px; 
 
    left: -105px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 70px solid red; 
 
    border-left: 100px solid transparent; 
 
    -webkit-transform: rotate(-70deg); 
 
    -moz-transform: rotate(-70deg); 
 
    -ms-transform: rotate(-70deg); 
 
    -o-transform: rotate(-70deg); 
 
    content: ''; 
 
} 
 

 
.wrapper span { 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 48px; 
 
}

<div class="wrapper"> 
 
    <div id="star-five"></div> 
 
    <span>2</span> 
 
</div>

来源

2017-07-27 09:18:30 sol

<html> 

<head> 
    <style> 
     #star-five { 
      margin: 50px 0; 
      position: relative; 
      display: block; 
      color: red; 
      width: 0px; 
      height: 0px; 
      border-right: 100px solid transparent; 
      border-bottom: 70px solid red; 
      border-left: 100px solid transparent; 
      -moz-transform: rotate(35deg); 
      -webkit-transform: rotate(35deg); 
      -ms-transform: rotate(35deg); 
      -o-transform: rotate(35deg); 
     } 

     #star-five:before { 
      border-bottom: 80px solid red; 
      border-left: 30px solid transparent; 
      border-right: 30px solid transparent; 
      position: absolute; 
      height: 0; 
      width: 0; 
      top: -45px; 
      left: -65px; 
      display: block; 
      content: ''; 
      -webkit-transform: rotate(-35deg); 
      -moz-transform: rotate(-35deg); 
      -ms-transform: rotate(-35deg); 
      -o-transform: rotate(-35deg); 
     } 

     #star-five:after { 
      position: absolute; 
      display: block; 
      color: red; 
      top: 3px; 
      left: -105px; 
      width: 0px; 
      height: 0px; 
      border-right: 100px solid transparent; 
      border-bottom: 70px solid red; 
      border-left: 100px solid transparent; 
      -webkit-transform: rotate(-70deg); 
      -moz-transform: rotate(-70deg); 
      -ms-transform: rotate(-70deg); 
      -o-transform: rotate(-70deg); 
      content: ''; 
     } 

     #item { 
      margin-top: -75px; 
      left: 75px; 
      position: absolute; 
     } 
    </style> 

</head> 

<body> 
    <div> 
     <div id="star-five"> 
     </div> 
     <div id="item"> 
      ITEM 
     </div> 
    </div> 
</body> 

</html>

这部作品只是改变位置和操作保证金！

来源

2017-07-27 09:20:02

<html> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
<style> 
.star{position:relative; display:inline-block;} 
.star i{font-size:68px;} 
.star-content{position: absolute;top: 37%; left: 37%; z-index: 999999; text-align: center; } 
.star-content span{color: #fff;} 
</style> 
</head> 
<body> 
<div class="star"> 
    <i class="fa fa-star" aria-hidden="true"></i> 
    <div class="star-content"> 
     <span>01</span> 
    </div> 
</div> 
</body> 
</html>

来源

2017-07-27 09:21:55

您可以将您的明星设置为Unicode字符，并使用绝对定位移动星号内的数字。在那里你可以设置CSS属性color和font-size使用颜色和字体大小。

.star { 
 
    font-size: 75px; 
 
    color: cornflowerblue; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.star:after { 
 
    content: "1"; 
 
    font-size: 16px; 
 
    color: white; 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -20%); 
 
}

<div class="star">&#x2605;</div>

来源

2017-07-27 09:26:40

不错，但问题是我想要动态操作数字，并将其用于DOM页面，而不是在star中设置为内容属性：在classname之后。 –

@NikolaNoxiousDimitrov你可以在这里交换星号:) Star可以驻留在内容中。数字将是'.star'的'innerText'。如果你需要它可以发布示例。 –

形状符号内的内容/数字

回答

相关问题