CSS triangles cut out

Question

I have a box with a triangle that intersects it and I'd like a similar triangle to be cut out from the box so there is a white gap between the two. As this is a little hard to explain I created a jsFiddle here that shows what I have already.

Here is a screenshot

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

Most astonishing abuse of CSS border that I've ever seen. That's a compliment, incidentally. — eh9, Nov 05 '12 at 16:20
BTW, Firefox with hardware acceleration enabled renders such "triangles" as some very blurred thing not having any in common with triangle. So it makes sense to avoid using this technique. — Marat Tanalin, Nov 05 '12 at 16:29
To undertand how this shape works and for alternative solutions see http://stackoverflow.com/q/7073484/1811992 — web-tiki, Nov 21 '14 at 11:51

score 2 · Accepted Answer · answered Nov 05 '12 at 16:30

You can do this without the extra DIV for the arrow by using a UTF-8 "right arrow" and the :before pseudo class. This will give you a little more control over the style of the arrow.

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

}

score 1 · Answer 2 · answered Nov 05 '12 at 16:25

You just need to add a second triangle that is slightly bigger.

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

CSS triangles cut out

2 Answers2