javascript - CSS Parallelogram with Text - Stack Overflow

admin管理员组

文章数量:1026380

I've made a parallelogram using CSS3's skew transform, and placed text within another div that has an opposite skew value so that the text remains un-transformed: JSFiddle example.

Is there a way to have the text aligns to the edges of the parallelogram like this:

I'm open to other suggestions, such as using the canvas if it's not possible using CSS. If there is a JavaScript technique to do this then any links that may be useful would be appreciated.

UPDATE: After hunting for some cross-browser solutions, the easiest tool I found to achieve this was with this tool.

I've made a parallelogram using CSS3's skew transform, and placed text within another div that has an opposite skew value so that the text remains un-transformed: JSFiddle example.

Is there a way to have the text aligns to the edges of the parallelogram like this:

I'm open to other suggestions, such as using the canvas if it's not possible using CSS. If there is a JavaScript technique to do this then any links that may be useful would be appreciated.

UPDATE: After hunting for some cross-browser solutions, the easiest tool I found to achieve this was with this tool.

• javascript
• css
• canvas

Share Improve this question Follow edited Feb 2, 2015 at 8:47 James Craig asked Nov 6, 2014 at 11:28 James CraigJames Craig 6,8741010 gold badges4848 silver badges7777 bronze badges 4

• I think you should try rotating the text as: jsfiddle/jm1wqemL/1 – Vicky Gonsalves Commented Nov 6, 2014 at 11:31
• 1 @VickyGonsalves - the problem with that is that it's clearly skewed the content too – user1017882 Commented Nov 6, 2014 at 11:32
• @DeeMac great find! Could you put that into an answer for other people who are looking for the same thing as me? I had a frustrating few hours trying different search terms and nothing useful came up. – James Craig Commented Nov 6, 2014 at 12:50
• That link in the updated question is not working any more. – Abdalla Arbab Commented Jan 15, 2018 at 12:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

As requested, your answer lies in the use of -webkit-shape-inside: http://hongkiat./blog/css3-content-wrapping

Define a polygon with the points that match your parallelogram and your content will fit that shape.

TIP: To get the 'points' of your shape, export it as a vector from suitable graphics design software and in the SVG will be the coordinates.

I've made a parallelogram using CSS3's skew transform, and placed text within another div that has an opposite skew value so that the text remains un-transformed: JSFiddle example.

Is there a way to have the text aligns to the edges of the parallelogram like this:

I'm open to other suggestions, such as using the canvas if it's not possible using CSS. If there is a JavaScript technique to do this then any links that may be useful would be appreciated.

UPDATE: After hunting for some cross-browser solutions, the easiest tool I found to achieve this was with this tool.

I've made a parallelogram using CSS3's skew transform, and placed text within another div that has an opposite skew value so that the text remains un-transformed: JSFiddle example.

Is there a way to have the text aligns to the edges of the parallelogram like this:

I'm open to other suggestions, such as using the canvas if it's not possible using CSS. If there is a JavaScript technique to do this then any links that may be useful would be appreciated.

UPDATE: After hunting for some cross-browser solutions, the easiest tool I found to achieve this was with this tool.

• javascript
• css
• canvas

Share Improve this question Follow edited Feb 2, 2015 at 8:47 James Craig asked Nov 6, 2014 at 11:28 James CraigJames Craig 6,8741010 gold badges4848 silver badges7777 bronze badges 4

• I think you should try rotating the text as: jsfiddle/jm1wqemL/1 – Vicky Gonsalves Commented Nov 6, 2014 at 11:31
• 1 @VickyGonsalves - the problem with that is that it's clearly skewed the content too – user1017882 Commented Nov 6, 2014 at 11:32
• @DeeMac great find! Could you put that into an answer for other people who are looking for the same thing as me? I had a frustrating few hours trying different search terms and nothing useful came up. – James Craig Commented Nov 6, 2014 at 12:50
• That link in the updated question is not working any more. – Abdalla Arbab Commented Jan 15, 2018 at 12:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

As requested, your answer lies in the use of -webkit-shape-inside: http://hongkiat./blog/css3-content-wrapping

Define a polygon with the points that match your parallelogram and your content will fit that shape.

TIP: To get the 'points' of your shape, export it as a vector from suitable graphics design software and in the SVG will be the coordinates.

本文标签： javascriptCSS Parallelogram with TextStack Overflow