Title: How to create a trapezium mainly bending the right side of the rectangle
Tags: svg
Question: This is my svg path. I am trying to achieve trapezium. Left of the rectangle has come out fine. I wanted the same way on the right side. How do I bend it?
<path d="M20 20  H 300 V 70 H 10 Z" fill="transparent" style="stroke:black; stroke-width:2"/&gt;
This is the image reference of the shape I wanted:
http://amsi.org.au/teacher_modules/C3/C3g37.png
Comment: Do you know what all that letters and numbers in `d` means?

Here is the accepted answer: If you don't want a vertical line best not to use V as that command draws them. I've replaced the V with an L below.
<svg width="100%" height="100%"&gt;
<path d="M20 20  H 300 L 310 70 H 10 Z" fill="transparent" style="stroke:black; stroke-width:2"/&gt;
</svg&gt;
Comment for this answer: transform="translate(0, 10)" perhaps.
Comment for this answer: Thanks. This exactly what I was looking for. I was trying with rectangle shape before I tried with path. how can I move this down retaining the shape? I want to move it down Y axis.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:01/19/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<svg>', 'Title': 'How to create a trapezium mainly bending the right side of the rectangle', 'ViewCount': 560, 'id': 34870023, 'user_AboutMe': '', 'user_AccountId': 5558314.0, 'user_DisplayName': 'Deke', 'user_Reputation': 4228.0, 'user_Views': 432.0, 'user_id': 4408845.0}}