Is it possible to create an angled corner in CSS?

by

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

More Related Contents:

  1. Speech bubble with arrow
  2. How can I show only corner borders?
  3. Invert rounded corner in CSS?
  4. Transparent hollow or cut out circle
  5. How to skew element but keep text normal (unskewed)
  6. Control the dashed border stroke length and distance between strokes
  7. How to make 3-corner-rounded triangle in CSS
  8. CSS transparent curved shape with two rounded sides
  9. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  10. Wave (or shape?) with border on CSS3
  11. How to draw a circle sector in CSS?
  12. How to create a curve on the top of a background?
  13. How to create multi-color border with CSS?
  14. How can I create a “tooltip tail” using pure CSS?
  15. background image, linear gradient jagged edged result needs to be smooth edged
  16. Segments in a circle using CSS3
  17. How to make a circle around content using CSS?
  18. Adjacent divs with angled borders? [duplicate]
  19. Blocky gradient effect in CSS3
  20. How to create an irregular square shape in css?
  21. How to create a radial menu in CSS?
  22. Arrow Box with CSS
  23. Filling water animation
  24. Make CSS3 triangle with linear gradient
  25. Creating an Isoceles Trapezoid shape
  26. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  27. Make table cells square
  28. Div with cut out edges, border and transparent background
  29. how to handle ‘double opacity’ of two overlapping divs
  30. Double curved shape

Leave a Comment