我如何使用CSS創建菱形內的標題？

Question

我想創造一種風格處理，與此類似：

怎麼會是這樣的工作？

Answer 1

使用CSS轉換：

您可以通過使用兩個僞元素創建菱形和CSS變換旋轉像在下面的代碼片段。這將使文本不會受到轉換的影響，因此定位它會相對容易。

rotateZ(45deg)產生一個相等的菱形形狀，而額外的rotateX(45deg)負責拉伸的外觀，這使得側面看起來像他們是不相等的長度。

文字定位相當簡單，只需將其與中心對齊，然後將line-height設置爲與容器的height相同。請注意，這種垂直居中的方法只能在文本排成一行時才起作用。如果它可以跨越多行，那麼它應該放在一個額外的元素中，並且translateY(-50%)變換應該用於垂直居中。

.diamond { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    line-height: 200px; 
 
    text-align: center; 
 
    margin: 10px 40px; 
 
} 
 
.diamond:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
    transform: rotateX(45deg) rotateZ(45deg); 
 
    box-shadow: 0px 0px 12px gray; 
 
} 
 
.diamond:after { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    content: ''; 
 
    height: calc(100% - 22px); /* -22px is 2 * 10px gap on either side - 2px border on either side */ 
 
    width: calc(100% - 22px); /* -22px is 2 * 10px gap on either side - 2px border on either side */ 
 
    border: 1px solid orange; 
 
    transform: rotateX(45deg) rotateZ(45deg); 
 
}

<div class='diamond'> 
 
    Text Here 
 
</div>

---

使用SVG：

相同的形狀可以使用SVG path元件也代替CSS變換來創建。樣本可在下面的代碼片段中找到。

.diamond { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 300px; 
 
    line-height: 200px; 
 
    text-align: center; 
 
} 
 
.diamond svg { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: -1; 
 
} 
 
path.outer { 
 
    fill: white; 
 
    stroke: transparent; 
 
    -webkit-filter: url(#dropshadow); 
 
    filter: url(#dropshadow); 
 
} 
 
path.inner { 
 
    fill: transparent; 
 
    stroke: orange; 
 
}

<div class='diamond'> 
 
    <svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <filter id="dropshadow" height="125%"> 
 
     <feGaussianBlur in="SourceAlpha" stdDeviation="1" /> 
 
     <feOffset dx="0" dy="0" result="offsetblur" /> 
 
     <feMerge> 
 
     <feMergeNode/> 
 
     <feMergeNode in="SourceGraphic" /> 
 
     </feMerge> 
 
    </filter> 
 
    <path d='M2,50 50,2 98,50 50,98z' class='outer' /> 
 
    <path d='M8,50 50,8 92,50 50,92z' class='inner' /> 
 
    </svg> 
 
    Text Here 
 
</div> 
 

 
<!-- Filter Code Adopted from http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 -->

Answer 2

是否金剛石有不同的寬度和高度？否則，你可以用僞元素轉換一個正方形。

body { 
 
    text-align: center; 
 
    padding-top: 30px; 
 
} 
 
.diamond { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    margin-top: 25px; 
 
    display: inline-block; 
 
} 
 
.diamond:before { 
 
    position: absolute; 
 
    display: block; 
 
    content: ""; 
 
    width: 100px; 
 
    height: 100px; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    -webkit-transform: rotate(45deg); 
 
    -webkit-transition: border-color 0.3s; 
 
    -moz-transform: rotate(45deg); 
 
    -moz-transition: border-color 0.3s; 
 
    transform: rotate(45deg); 
 
    box-shadow: 0px 0px 21px -2px rgba(0, 0, 0, 0.25); 
 
} 
 
.diamond-inner { 
 
    width: 80px; 
 
    height: 80px; 
 
    position: relative; 
 
    margin-top: 25px; 
 
    display: inline-block; 
 
} 
 
.diamond-inner:before { 
 
    position: absolute; 
 
    display: block; 
 
    content: ""; 
 
    width: 80px; 
 
    height: 80px; 
 
    left: 0; 
 
    top: -15px; 
 
    right: 0; 
 
    bottom: 0; 
 
    border: 1px solid #9C9819; 
 
    -webkit-transform: rotate(45deg); 
 
    -webkit-transition: border-color 0.3s; 
 
    -moz-transform: rotate(45deg); 
 
    -moz-transition: border-color 0.3s; 
 
    transform: rotate(45deg); 
 
}

<div class="diamond"> 
 
    <div class="diamond-inner"> 
 
    Test 
 
    </div> 
 
</div>

另見：JSFiddle