Question

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

Answer 1

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

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

using LazyCache;

IAppCache cache = new CachingService();
return await cache.GetOrAddAsync<ILoadChartStorageInformation[]>
(key, (Func<Task<ILoadChartStorageInformation[]>>) (async () =>
{
    return await someFunction();
}

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

Answer 2

您可以将星形包装在具有一些flexbox属性的容器中。添加您的内容并使用position: absolute将其居中......

来自css tricks

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

这只会改变位置并操纵保证金！

Answer 4

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

Answer 5

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

形状符号内的内容/数字

5 个答案: