形状符号内的内容/编号
Posted
技术标签:
【中文标题】形状符号内的内容/编号【英文标题】：Content/Number inside a shape symbol 【发布时间】：2018-01-02 21:45:08 【问题描述】：我想在星形符号内放一个内容。发现很难仅使用 css 而不是 svg。我尝试过这样的事情：https://css-tricks.com/examples/ShapesOfCSS/ 但它不起作用。 一种方法是使用 SVG，但它们很难响应，因为我需要在那里有额外的 jquery/js 函数。 所以想知道有没有其他方法可以实现这一点。
【问题讨论】：
你的星形要多少分？ 【参考方案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: '';
<div class="star">100</div>【讨论】：
【参考方案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%);
<div class="star">&#x2605;</div>【讨论】：
很好，但问题是我想动态操作数字，并在 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>
.starposition:relative; display:inline-block;
.star ifont-size:68px;
.star-contentposition: absolute;top: 37%; left: 37%; z-index: 999999; text-align: center;
.star-content spancolor: #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 将其居中...
.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>【讨论】：
以上是关于形状符号内的内容/编号的主要内容，如果未能解决你的问题，请参考以下文章
基于WPS的Word最佳实践系列（利用项目符号及编号条理化文本1）