How to Create an Angled Corner in Css

Is it possible to create an angled corner in CSS?

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)

Add a border to the container
Add a before to block out a corner and offset by -1 to cover the border
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>

Is it possible to draw a border with 1 angled corner?

Here is a solution with linear gradient:

.box {  height:100px;  width:200px;  background:linear-gradient(to bottom,red 50%,transparent 0) 0 0/calc(100% - 20px) 2px no-repeat,  linear-gradient(to bottom,transparent 50%,red 0) 0 100%/100% 2px no-repeat,  linear-gradient(to right,red 50%,transparent 0) 0 0/2px 100% no-repeat,  linear-gradient(to right,transparent 50%,red 0) 100% 20px/2px 100% no-repeat,  linear-gradient(to top right,transparent 50%,red 50%,red calc(50% + 1px),transparent calc(50% + 2px)) 100% 0/20px 20px no-repeat;}

<div class="box"></div>

Angled corners on CSS with Transparency

You can consider multiple background to achieve this and you are almost good with your linear-gradient(-220deg, transparent 10px, #ad1c1c 10px). Simply adjust the size and position:

h1 {  color: #fff;  text-align: center;  padding:10px;  background:    linear-gradient(-225deg,transparent 10px,#ad1c1c 0) left /50.5% 100%,    linear-gradient( 225deg,transparent 10px,#ad1c1c 0) right/50.5% 100%;  background-repeat:no-repeat;}
body { background:pink;}

<h1 >Test</h1>

How to draw a rectangle with an angled corner in SVG

I don't quite understand why an SVG and masking is required.

This snippet just applies the clip path to the images.

It takes a corner off at 15degrees of the same area regardless of the size or aspect ratio of the image as the amount to be taken off is not specified in the question:

.clipped {
  --x: 100px;
  --tan15: 0.267949192;
  --y: calc(var(--tan15) * var(--x));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--y)), calc(100% - var(--x)) 100%, 0 100%);
}

<img class="clipped" src="https://picsum.photos/id/1015/200/300">
<img class="clipped" src="https://picsum.photos/id/1015/300/300">
<img class="clipped" src="https://picsum.photos/id/1015/300/200">

css rounded corner of right angled triangle

Here is an idea where you can rely on 2 pseudo element and some background coloration to approximate it. You simply need to find the correct value to have the perfect overlap between both pseudo elements.

h1 {  padding-left:1em;  position:relative;}
h1:before {  content: "";  position:absolute;  left: 0;  top: calc(50% - 0.35em);  width: 0.7em;  height: 0.7em;  background: linear-gradient(to bottom left, #34495e 50%, transparent 50%);  border-radius: 0.1em;}h1:after {  content: "";    position: absolute;    left: 3.8px;    top: -0.1px;    width: 0.92em;    height: 0.8em;    margin-right: 10px;    background: linear-gradient(to top,#34495e 3.5px,transparent 5px);    border-radius: 0.1em;    transform: rotate(45deg);    z-index: -1;}

<h1>Heading</h1>