Triangle with a CUT CORNER NOT rounded corner

[Historical Forums User]

Hi i am trying to get a triangle with a cut corner leaving it with 3 corners and one cut. Here is my css code
css:

article {
    border: 1px solid #ccc;
    border-radius: 0 0 0 50.1px;
    float: left;
    overflow: hidden;
    padding: 40px;
    width: 300px;
    background-color: #d0041c;
    margin-bottom: 10px;
}

html code:

<article>
  <h3><a href="#" style="color: #ffffff"><strong>ALLE VACATURES OP EEN RIJ</strong></a> <i class="arrow right2"></i></h3>
</article>

[Paulie_D]

An image of what you are trying to achieve would be useful…and a Codepen.io demo

The code you provided is not really adequate to explain this. All triangles have 3 corners so this…

i am trying to get a triangle with a cut corner leaving it with 3 corners and one cut

doesn’t really make sense.

[Shikkediel]

In case you meant rectangle…

codepen.io/anon/pen/vaBQwL

[Historical Forums User]

@Shikkediel thank you so much that is exactly what i wanted. Your help is much appreciated.

[Historical Forums User]

@shikkediel – if i want to have a background image and have the red color transparent how can i go about doing that because i did try and its not working.

[Shikkediel]

Maybe you could fork the pen and show what you’re aiming at that way?

[Author]

Posts