How to do a custom border shape with CSS3

Question

I'm just wondering if this shape I have in the image url is doable in css3 with webkit.

take a look at this http://stackoverflow.com/questions/10568334/css-to-produce-adjacent-divs-with-angled-borders — Jmh2013, Mar 07 '14 at 20:49
**FIDDLE!** http://jsfiddle.net/qhxLu/ - **SOURCE** http://www.css3shapes.com/ — Pedro Estrada, Mar 07 '14 at 20:50
i think you got your solution, so choose an answer to mark as accepted — brrystrw, Mar 08 '14 at 03:36

score 2 · Accepted Answer · edited Mar 07 '14 at 21:00

2

Just edit the class properties to your liking to get desired shape

CSS:

.parallelogramRight {
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background:yellow;
     transform: skew(-20deg); 
     -o-transform: skew(-20deg); 
     -moz-transform: skew(-20deg); 
     -webkit-transform: skew(-20deg);
}

edited Mar 07 '14 at 21:00

brrystrw

471
7
20

answered Mar 07 '14 at 20:51

Ryan Salmons

1,429
10
21
42

Thanks Ryan, that website got what i needed. – mmz Mar 07 '14 at 20:58

score 1 · Answer 2 · answered Mar 07 '14 at 20:51

1

You can use the transform: skew() property.

http://codepen.io/anon/pen/tkdyx

answered Mar 07 '14 at 20:51

Cody James Peterson

13
2

score 0 · Answer 3 · answered Mar 07 '14 at 20:50

0

Yes it is.

-moz-transform: skewX(-23deg);
-webkit-transform: skewX(-23deg);
-o-transform: skewX(-23deg);
-ms-transform: skewX(-23deg);
transform: skewX(-23deg);

answered Mar 07 '14 at 20:50

Mark

4,773
8
53
91

This is a pretty simple solution. – Mark Mar 07 '14 at 20:53
1

Great everyone thanks for your input and suggestions. – mmz Mar 07 '14 at 20:58

How to do a custom border shape with CSS3

3 Answers3