.square { width:100px; height:100px; border:1px solid #000; background:yellow; } .parallelogram { 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); } .parallelogramRight { width:100px; height:100px; border:1px solid #000; background:yellow; transform: skew(-20deg); -o-
![【css】いろんな形をスタイルシートで at softelメモ](https://cdn-ak-scissors.b.st-hatena.com/image/square/1547f4b97eb50bd09e99d5f897a6c447ee41f867/height=288;version=1;width=512/https%3A%2F%2Fwww.softel.co.jp%2Fblogs%2Ftech%2Ffb.png)