CODEWITHSUNDEEP
csswebkit
mmz
mmz

Reputation: 31

How to do a custom border shape with CSS3

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

Upvotes: 0

Views: 108

Answers (3)

Ryan Salmons
Ryan Salmons

Reputation: 1459

Here is a good source for CSS shapes

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);
}

Upvotes: 2

Cody James Peterson
Cody James Peterson

Reputation: 13

You can use the transform: skew() property.

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

Upvotes: 1

Mark
Mark

Reputation: 4873

Yes it is.

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

Upvotes: 0

Related Questions