How to create an angled corner edge in CSS [duplicate]

Question

My main site container follows a pretty unusual path, and I'm having trouble figuring out how to implement it, mainly the angled part in the middle.

hopefully I can do this via CSS, though I'm open to other alternatives. I've done a lot of searching, and found things that somewhat apply to this, but nothing specifically.

enter image description here

This question appears to be off-topic because it should be moved to wordpress.stackexchange.com — uthark
– uthark, Commented Jul 29, 2014 at 3:55
@uthark - why? They are after a CSS solution, I see no reference to wordpress at all! — Jon P
– Jon P, Commented Jul 29, 2014 at 4:08
There was a reference to Wordpress in the original question but I edited it out because the actual question had nothing to do specifically with Wordpress. — davidcondrey
– davidcondrey, Commented Jul 29, 2014 at 7:17
@JonP initially question stated wordpress + it was not clear if the question doesn't involve wordpress specifics css. — uthark
– uthark, Commented Jul 29, 2014 at 13:18

davidcondrey · Accepted Answer · 2014-07-29 03:50:22Z

1

Here you go: http://cssdeck.com/labs/54raksui

.edge{position:relative;background-color:#cccccc;border:1px solid #ffffff;display:inline-block;}
.edge img{display:block;}
.edge:before{content:'';position:absolute;left:-1px;top:-1px;border-top:50px solid #ffffff;border-right:50px solid transparent;}
.edge:after{content:'';position:absolute;left:-2px;top:-2px;border-top:50px solid white;border-right:50px solid transparent;}

<div class="edge">
    <img src="http://placekitten.com/g/500/300" alt="" />
</div>

answered Jul 29, 2014 at 3:50

davidcondrey

36.3k18 gold badges119 silver badges138 bronze badges

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

Collectives™ on Stack Overflow

How to create an angled corner edge in CSS [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related