CSS3三角形中的文本對齊

我在創建三角形形狀的div內的文本時遇到問題。全部用CSS完成。CSS3三角形中的文本對齊

這個三角形目前是絕對的，因爲它需要一個更大的項目（我從大項目中刪除了代碼，因爲它是無關緊要的）。

這裏是一個jsFiddle

見下面的代碼：

HTML

<div>Here is a Triangle</div>

CSS

div { 
    text-align: center; 
    color: #fff; 
    font-size: 1.125em; 
    width: 100%; 
} 

div:nth-child(1) { 
    position: absolute; 
    top: 100px; 
    left: 100px; 
    width: 0; 
    height: 0; 
    border-left: 126px solid transparent; 
    border-right: 126px solid transparent; 
    border-bottom: 126px solid #D30000; 
}

來源

2013-05-16 patrick

自'div'的寬度爲零，每對單詞之間會有一個換行符。 –

@JanDvorak我正在玩弄寬度，並確切地看到你在說什麼。現在唯一的問題是它不會以三角形的形式存在，而會以梯形的形式存在。 – patrick

由於div具有零寬度，就會有一個換行在每對單詞之間。

一個解決方案可能是創建一個元素的形狀，並在另一個元素的文本。

您需要認識到三角形實際上是位於頂部頂點的一個0x0元素的非常厚的邊界，並且相應地定位。

在這裏，我已經將文字定位在三角形的基線上，並將其寬度從基底的一個頂點設置到另一個頂點。隨意使用文本元素的大小來避免文本溢出三角形。我很害怕，但是，你不能只讓文字三角形內部流動：

HTML：

<div class="triangle"><div class="text">Here is a Triangle</div></div>

CSS：

div { /*your original CSS*/ } 
div.triangle { /* your original CSS for div:nth-child(1) */ } 

div.text { 
    position: absolute; 
    bottom: -126px; /* baseline */ 
    left: -126px; /* left tip */ 
    right: -126px; /* right tip */ 
    width: auto; /* reset width:100% from div */ 
    height: auto; /* just in case */ 
}

http://jsfiddle.net/honnza/UPeCf/8/

來源

2013-05-16 03:46:08

CSS3三角形中的文本對齊

回答

相關問題