形状符号内的内容/编号答案

【问题标题】：Content/Number inside a shape symbol形状符号内的内容/编号
【发布时间】：2018-01-02 21:45:08
【问题描述】：

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

【问题讨论】：

你的星形要多少分？

标签： html css svg sass

【解决方案1】：

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

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

.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: '';
}

&lt;div class="star"&gt;100&lt;/div&gt;

【讨论】：

【解决方案2】：

您可以将星号设置为 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%);
}

&lt;div class="star"&gt;&amp;#x2605;&lt;/div&gt;

【讨论】：

很好，但问题是我想动态操作数字，并在 DOM 页面中使用它，而不是在 star:after 类名中设置为内容属性。
@NikolaNoxiousDimitrov 您可以在此处将数字与星号交换：) 星号可以驻留在内容中。号码将是 innerText 的 .star。如果您需要，可以发布示例。

【解决方案3】：

<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>

【讨论】：

【解决方案4】：

<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>

这只是改变位置和操纵边距！

【讨论】：

【解决方案5】：

您可以将星形包装在具有一些 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>

【讨论】：