css - CSS三角形切出

Question

我有一个与它相交的三角形的盒子，我想从盒子上剪下一个类似的三角形，这样两者之间就有一个白色的间隙。由于这有点难以解释，我在这里创建了一个jsFiddle 来显示我已经拥有的内容。

这是一个截图

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;
}
​

Answer 1

通过使用 UTF-8“右箭头”和: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;

}

Answer 2

您只需要添加第二个稍大的三角形。

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;
}