Almost the same solution as @pedram, but using pseudo element in order to avoid inverse skewing the content inside the div (if there will be a content) :
div.content { width: 200px; height: 200px; position:relative; padding:20px; box-sizing:border-box; } div.content:before { content:""; position:absolute; background: #ff8f00; border-radius: 15px; transform: skew(-5deg); top:0; left:0; right:0; bottom:0; z-index:-1; ]
<div class="content"> lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume </div>
You should use transform skew
like below, and your shape called Parallelogram
div { width: 200px; height: 200px; background: #ff8f00; border-radius: 15px; transform: skew(-5deg); /* OR transform: skew(-190deg); */ position: relative; left: 20px; top: 10px; }
<div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.