CSS：六边形与背景图像的DIV文本

我有以下的HTML和CSS代码：CSS：六边形与背景图像的DIV文本

.hex { 
 
    width: 150px; 
 
    height: 86px; 
 
    background-color: #ccc; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    background-size: auto 173px; 
 
    position: relative; 
 
    float: left; 
 
    margin: 25px 5px; 
 
    text-align: center; 
 
    zoom: 1; 
 
} 
 
.hex a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-indent: -9999em; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.hex .corner-1, 
 
.hex .corner-2 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: inherit; 
 
    z-index: -2; 
 
    overflow: hidden; 
 
    backface-visibility: hidden; 
 
} 
 
.hex .corner-1 { 
 
    z-index: -1; 
 
    transform: rotate(60deg); 
 
} 
 
.hex .corner-2 { 
 
    transform: rotate(-60deg); 
 
} 
 
.hex .corner-1:before, 
 
.hex .corner-2:before { 
 
    width: 173px; 
 
    height: 173px; 
 
    content: ''; 
 
    position: absolute; 
 
    background: inherit; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    background: inherit; 
 
    background-repeat: no-repeat; 
 
    backface-visibility: hidden; 
 
} 
 
.hex .corner-1:before { 
 
    transform: rotate(-60deg) translate(-87px, 0px); 
 
    transform-origin: 0 0; 
 
} 
 
.hex .corner-2:before { 
 
    transform: rotate(60deg) translate(-48px, -11px); 
 
    bottom: 0; 
 
} 
 
/* Custom styles*/ 
 

 
.hex .inner { 
 
    color: #eee; 
 
} 
 
.hex h4 { 
 
    font-family: 'Josefin Sans', sans-serif; 
 
    margin: 0; 
 
} 
 
.hex hr { 
 
    border: 0; 
 
    border-top: 1px solid #eee; 
 
    width: 60%; 
 
    margin: 15px auto; 
 
} 
 
.hex p { 
 
    font-size: 16px; 
 
    font-family: 'Kotta One', serif; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.hex.hex-3 { 
 
    background: #80b971; 
 
}

<div class="divWithBackgrounImage"> 
 
    <div class="hex hex-3"> 
 
    <div class="inner"> 
 
     <h4>CONTACT US</h4> 
 
     <hr /> 
 
     <p>We Open Everyday</p> 
 
    </div> 
 
    <a href="#"></a> 
 
    <div class="corner-1"></div> 
 
    <div class="corner-2"></div> 
 
    </div> 
 
</div>

的问题是，z-index的负值背后隐藏的背景图。如果我使用正向z-索引比我的六边形中没有文字。如何解决这个问题呢？

来源

2016-04-24 Pavel_K

替换为一个单一的SVG图像的复杂六角黑客将让一切更简单和更清洁的IMO –

@Denys塞居勒非常感谢你的好主意！但是，有可能使内部的文本svg六角形？ –

当然可以。您还可以使用javascript设置文本（或svg的任何部分）。而且你也可以使用svg作为文本的div的背景。 –

比CSS形状黑客更通用的解决方案是使用SVG。例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="300" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20" fill="#fa5" stroke="blue" stroke-width="5" transform="translate(10)"></polygon> 
 
    <text x="160" y="160" 
 
     font-family="Verdana" 
 
     font-size="30" 
 
     text-anchor="middle" 
 
    > 
 
    Any Text Here 
 
    </text> 
 
</svg>

有很多可能性：

具有静态SVG，或者担当图像或内联（如本段）
使用SVG作为带文本的div的背景，或者使SVG包含文本（如片段中所示）
使用JavaScript动态盟友设置图像中的文字（或其他属性，如颜色或大小）
完全生成与JavaScript的SVG（这是我的惯例，我甚至有一个微库：hu.js），这种解决方案适合于完全动态的内容，是越来越频繁

来源

2016-04-24 07:20:26

CSS：六边形与背景图像的DIV文本

回答

相关问题