csscss-shapes

Is it possible to create an angled corner in CSS?

I am wondering if there is any way to create this shape with pure CSS. To extend this problem further, this shape needs to clip the image inside (think of it as a mask - but the grey border has to be visible).

enter image description here

Or am I better off creating this in canvas/svg?

Solution

  • It's a little difficult keeping the border, but I managed to achieve a close effect using :before and :after elements with a parent container (:before and :after don't work on an img tag)

    1. Add a border to the container

    2. Add a before to block out a corner and offset by -1 to cover the border

    3. Add an after that's slightly offset from the before to create the line inside the cut off

    As you can see, the thickness of the 45deg line is a bit of an issue:

    .cutCorner {
    position:relative; background-color:blue; 
    border:1px solid silver; display: inline-block;
}

.cutCorner img {
    display:block;
}

.cutCorner:before {
    position:absolute; left:-1px; top:-1px; content:'';
    border-top: 70px solid silver;
    border-right: 70px solid transparent;
}

.cutCorner:after {
    position:absolute; left:-2px; top:-2px; content:'';
    border-top: 70px solid white;
    border-right: 70px solid transparent;
}
    <div class="cutCorner">
    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

    JSFiddle