切出的CSS三角形

我有一個三角形與其相交的盒子，我想從盒子中切出一個類似的三角形，所以兩者之間有一個白色的間隙。由於這是有點難以解釋，我創建了一個jsFiddle here，顯示了我已經。切出的CSS三角形

下面是截圖

CSS Triangles

HTML

<div id="alertdetails"> 
    <h2>UH OH</h2> 
    Date: 05/11/2012 15:57:46 

    <br><br> 
    <a href="">View</a> 
</div> 
<div id="arrow-right"></div>

CSS

#alertdetails { 
    background-color: #F8F8F8; 
    border: 1px solid #CCCCCC; 
    border-radius: 5px 5px 5px 5px; 
    left: 25px; 
    padding: 20px; 
    position: absolute; 
    text-shadow: 0 1px #FFFFFF; 
    top: 15px; 
} 

#arrow-right { 
    position: absolute; 
    top: 45px; 
    left: 15px; 
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 

    border-left: 20px solid #303030; 
}

來源

2012-11-05 Chris

最令人驚訝的CSS邊界濫用，我見過。順便說一句，這是一種恭維。 – eh9

順便說一下，啓用了硬件加速功能的Firefox將這些「三角形」渲染爲與三角形沒有任何共同點的一些非常模糊的事物。所以避免使用這種技術是有道理的。 –

要深入瞭解此形狀如何工作以及替代解決方案，請參閱http://stackoverflow.com/q/7073484/1811992 –

您可以使用UTF-8 「right arrow」和:before僞類這樣做沒有爲箭頭額外的DIV。這會讓你更多地控制箭頭的風格。

#alertdetails { 
    background-color: #F8F8F8; 
    border: 1px solid #CCCCCC; 
    border-radius: 5px 5px 5px 5px; 
    left: 25px; 
    padding: 20px; 
    position: relative; 
    margin-top:15px; 
    text-shadow: 0 1px #FFFFFF; 
} 

#alertdetails::before { 
    content:"\25b6"; 
    position:absolute; 
    top:20px; 
    left:-20px; 
    font-size:60px; 
    color:#ffffff; 

}

來源

2012-11-05 16:30:30

你只需要添加第二個三角形稍大一點。

HTML

<div id="alertdetails"> 
    <h2>UH OH</h2> 
    Date: 05/11/2012 15:57:46 

    <br><br> 
    <a href="">View</a> 
</div> 
<div id="arrow-white"></div> 
<div id="arrow-right"></div>

CSS

#alertdetails { 
    background-color: #F8F8F8; 
    border: 1px solid #CCCCCC; 
    border-radius: 5px 5px 5px 5px; 
    left: 25px; 
    padding: 20px; 
    position: absolute; 
    text-shadow: 0 1px #FFFFFF; 
    top: 15px; 
} 

#arrow-right { 
    position: absolute; 
    top: 45px; 
    left: 15px; 
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 

    border-left: 20px solid #303030; 
} 

#arrow-white{ 
    position: absolute; 
    top: 44px; 
    left: 15px; 
    width: 0; 
    height: 0; 
    border-top: 21px solid transparent; 
    border-bottom: 21px solid transparent; 

    border-left: 22px solid #ffffff; 
}

來源

2012-11-05 16:25:26

切出的CSS三角形

回答

相關問題