带内部文本的HTML六角形

我正在尝试创建一个六角形小部件。这应该是这个样子：带内部文本的HTML六角形

（请忽略行）

和移动这样的事情：

现在的六边形它自身应该是相当很容易有很多关于如何创建它们的文档。然而，关于如何添加这样的文本的信息很少。

通常六角形是由几个元素扭曲和转动来创建形状。

这不是很适合我的需求，因为文本不会呈现（或在另一个div下）。

使用下面的CSS：

.hexagon { 
    position: relative; 
    width: 200px; 
    height: 115.47px; 
    background-color: #ffffff; 
    margin: 57.74px 0; 
    border-left: solid 2px #000000; 
    border-right: solid 2px #000000; 
} 

.hexagon:before, 
.hexagon:after { 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    width: 141.42px; 
    height: 141.42px; 
    -webkit-transform: scaleY(0.5774) rotate(-45deg); 
    -ms-transform: scaleY(0.5774) rotate(-45deg); 
    transform: scaleY(0.5774) rotate(-45deg); 
    background-color: inherit; 
    left: 27.2893px; 
} 

.hexagon:before { 
    top: -70.7107px; 
    border-top: solid 2.8284px #000000; 
    border-right: solid 2.8284px #000000; 
} 

.hexagon:after { 
    bottom: -70.7107px; 
    border-bottom: solid 2.8284px #000000; 
    border-left: solid 2.8284px #000000; 
}

我已经创建了基本的六边形：

这里是一个小提琴：https://jsfiddle.net/c5dk9Lay/1/

有任何影响，你有什么经验创建这样一个小部件或知道工作，以便文本可以显示

来源

2017-04-19 Marc Rasmussen

看看这个codepen https://codepen.io/darsain/pen/Cxawq – Syfer

检查这个小提琴。 Here

HTML： <div class="hexagon"> <div class="text"> <h1>89%</h1> <p>My Overall Score</p> </div> </div>

添加CSS：

.text{ 
    position: absolute; 
z-index: 1000; 
width: 100%; 
text-align: center;

}

来源

2017-04-19 08:13:47

嘿谢谢你这个作品你有什么想法，我可能会实现移动版本？ –

检查此小提琴更新。 https://jsfiddle.net/n2uvw73z/1/。只需使用媒体查询CSS移动版本。调整500px以下的结果窗口以查看效果 –

带内部文本的HTML六角形

回答

相关问题