CSS: Border-Radius with square-cut/cut off corners instead of round corners [duplicate]

Question

Is it possible with pure CSS (without images or sth. like that) to create square-cut corners.

Example:

.elem {
     border-radius:50%;
}

The above CSS creates a circle - very useful.

However I am searching for a possibility in CSS to create a diamond. Or just an element with cut-off corners. I thought about the transform property but maybe there is something to only cut of the corners instead of turning the whole element and turning its contents back?

Don't you mean something like this? (scroll down) css-tricks.com/examples/ShapesOfCSS — fnune
– fnune, Commented Jan 14, 2016 at 20:36
Your answer would be here I guess: stackoverflow.com/questions/7324722/cut-corners-using-css — Stefan Neuenschwander
– Stefan Neuenschwander, Commented Jan 14, 2016 at 20:37
It's impossible through border-radius just yet, but check the border-image property. — Jonathan Zúñiga
– Jonathan Zúñiga, Commented Jan 14, 2016 at 20:39

Diane Duquesne · Accepted Answer · 2016-01-14 21:17:57Z

2

Here is a working jsfiddle of a diamond : https://jsfiddle.net/h9xmtnma/

Important thing to remember is the ability of using this kind of notation

#diamond:after

which is very useful !

Hope it works for you ! :)

Edit : Here is the code.

#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}

edited Jan 14, 2016 at 21:17

answered Jan 14, 2016 at 20:38

Diane Duquesne

4862 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Blackbam Over a year ago

Solves part of the question however now I found a discussion which discusses the whole topic very nice.

Diane Duquesne Over a year ago

Alright, hope you'll find what you need ! Do not hesitate to upvote though if it helped :) Have a good day !

blurfus Over a year ago

You should add the relevant code to your answer. External links can die (or become unavailable for various reasons) and if you have a link-only answer, it becomes useless (a non-reachable answer basically)

Diane Duquesne Over a year ago

Correct! This is done, thanks!

Collectives™ on Stack Overflow

CSS: Border-Radius with square-cut/cut off corners instead of round corners [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related