html - CSS - 六边形背景图像

Question

我需要使用空心六边形图像作为我网站中某些内容的背景。它应该看起来像这样:

但是我在布置六边形内的内容时遇到了各种麻烦。

到目前为止我有这个:

.hex-bg {
    background-image: url('/images/diamond.png');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 30px;
    padding: 10px;
}

你们认为处理这种情况的最佳方法是什么？

Answer 1

JSbin Demo

.hex-bg {
    background-image: url('/images/diamond.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    min-height: 30px;
    box-sizing:border-box;
    padding: 20px;
    width:250px;
    height:290px;
    text-align:center;
    color:white;
    font-size:14px;
}

.hex-bg img{
    max-width:50px;
    padding:20px;
}

.text-wrapper{
    margin-top:10px;
}

只要文本不太长并且不会溢出六边形的底部，它就应该可以工作。如果您需要文本的精确换行，您可能需要考虑另一种方法，例如 CSS Text Wrap