這個特定的設計效果如何實現？

-6

在這個網站上，http://kickpoint.ca/，存在的主要紅色部分下方的紅色小三角形頂部這個特定的設計效果如何實現？

enter image description here

我不能爲我的生活工作是如何做的。我使用過Chrome開發工具，無法查看它的定義位置。

任何人都知道它是如何實現的，或者是否有達到這種效果的標準方法？

來源

2013-07-31 jdee

這是所有CSS3與邊界和：之前和之後：pseudos。 –

http://cssarrowplease.com/ – Pete

查看psuedo元素「after」後的用法，並旋轉css。 – Curt

CSS三角形。

CSS

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 20px solid #f00; 
}

HTML

<div class="arrow-down"></div>

資源

更多信息，可以發現here

來源

2013-07-31 08:51:44 Blowsie

是的，更具體地說，它附加到一個僞元素，Chrome的開發工具可以看到匹配CSS規則窗格的底部。 –

下面是CSS技巧上如何做到這一點的鏈接：http://css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/

谷歌是你的朋友;）

來源

2013-07-31 08:51:47

另請參閱：http://css-tricks.com/snippets/css/css-triangle/ –

它使用CSS，使三角形。創建三角形的基本概念是在一側設置div的邊框以形成基礎。相鄰的邊框留爲空白，垂直於底邊的邊框設置爲transparent。 CSS三角形的一個很好的解釋可以在這裏找到：http://css-tricks.com/snippets/css/css-triangle/

HTML

<div class="pointer"> 
    <div class="inner"></div> 
    <div class="arrow"></div> 
</div>

CSS

.pointer{ 
    width: 100px; 
} 
.pointer .inner { 
    height: 25px; 
    background: red; 
} 

.pointer .arrow{ 
    border-top: 10px solid red; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    width: 0px; 
    margin: 0px auto; 
}

工作實例：http://jsfiddle.net/JYM8w/

來源

2013-07-31 08:55:00

這個特定的設計效果如何實現？

回答

相關問題