切出的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三角形

回答

相关问题