設置基於父元素寬度的僞元素之後的邊框寬度

首先，我認識到僞元素aren't part of the DOM，因此無法用jQuery進行定位。我想知道是否有另一種方法（純css或jQuery的一些創造性的使用）來設置一個屬性：在僞元素（在這種情況下是邊界寬度）依賴於父元素的寬度。設置基於父元素寬度的僞元素之後的邊框寬度

我造型使用this article描述的技術的導航菜單，但希望有三角形狀的部分是導航元件的全寬度：

nav menu example

然而，導航元素將不會全部或總是相同的寬度，因此需要根據父元素的寬度來設置邊框寬度。有關如何完成此任務的任何建議？

編輯：增加了演示的jsfiddle：http://jsfiddle.net/bcAQc/1/

注：出於某種原因，我不得不爲上邊和左邊的只是不同的價值觀：在比的jsfiddle我的網站上僞元素之後。在我的網站和上面鏈接的示例文章中，top設置爲100％，left設置爲50％。

來源

2011-12-28 Travis Northcutt

您是否可以將相關的HTML標記和CSS添加到帖子中，以便我們重現此內容？也許更進一步，並建立一個http://jsfiddle.net演示？我得到你想要做的，但考慮到更廣泛的導航項目將意味着更廣泛和更高的*三角形與這個技巧（他們不會對齊），或者它將意味着每個三角形的不同角度。請解釋你想要發生的事情。 – 2011-12-28 18:22:01

更新OP，並鏈接到jsfiddle演示。我想結束每個三角形的不同角度和一致的高度。 – 2011-12-29 16:18:07

我覺得Scott是正確的金錢時，他說：

CSS不允許百分比值來生成邊緣寬度（這將是在這種情況下，理想的

既然你有這個標籤爲「jquery」，我假設你對jQuery的解決方案是開放的嗎？恐怕只有CSS，使用邊界/三角形技巧纔可能實現這一點。當然，javascript打開這是一個可能的解決方案，這裏有一個：

演示：http://jsfiddle.net/bcAQc/2/

$('a').each(function(){ 
    var self = $(this), 
     width = (self.width()/2) + 10; // +10 for <a> padding 
    self.append('<span class="triangle" />'); 
    $('.triangle', self).css({ 
     'border-left-width' : width, 
     'border-right-width' : width 
    }); 
});

.triangle { 
    position: absolute; 
    border: 40px solid transparent; 
    border-top-color: blue; 
    display:block; 
    top:20px; 
    left: 0; 
}

儘管這似乎做你想要的，我覺得在the demo不同的角度，使它看起來那種醜陋的東西。如果是我，我會考慮固定寬度的列表項目：這將使這完全可能只有CSS和IMO看起來會好很多。

來源

2011-12-29 18:56:52

我剛剛做了固定寬度的列表項目 - 在文本週圍填充可變的填充確實看起來比尖頭部分上的可變角度要好得多。 – 2012-01-09 16:55:23

由於CSS不允許百分比值來生成邊緣寬度（這將是在這種情況下理想的），我認爲你唯一的解決方案是動態編寫CSS規則（添加style標籤通過JQuery的head元素）然後根據運行時導航標記的寬度構建三角形的寬度和高度。

我想你會希望三角形的高度相等，這意味着他們需要適應最寬的三角形所需的高度。因此類似以下內容，這是一個真實/僞代碼組合（儘管還有其他構建CSS規則的方法），您需要在導航的每個元素上設置一個類（假定已設置li元素到position: relative）：

$("<style type='text/css'> 
#Nav li:after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    border-style: solid; 
    border-color: transparent; 
    border-top-color: blue; /* your desired color of the triangle */ 
    border-width: ??px; /* set this to the calculated value of your desired standard height; I believe it should be at least 25% of the width of the widest nav element */ 
} 

#Nav li.yourNavElement1Class:after { 
    border-left-width: ??px; /* 50% of NavElement1 width */ 
    border-right-width: ??px; /* 50% of NavElement1 width */ 
} 

#Nav li.yourNavElement2Class:after { 
    border-left-width: ??px; /* 50% of NavElement2 width */ 
    border-right-width: ??px; /* 50% of NavElement2 width */ 
} 

#Nav li.yourNavElementEtcClass:after { 
    border-left-width: ??px; /* 50% of NavElementEtc width */ 
    border-right-width: ??px; /* 50% of NavElementEtc width */ 
} 
</style>").appendTo("head");

注意，這個規則的書寫是基於關閉這個問題的答案：Create a CSS rule/class with jQuery at runtime，還有其他的方式來實現的規則創建。

來源

2011-12-28 23:32:14 ScottS

設置基於父元素寬度的僞元素之後的邊框寬度

回答

相關問題