Css - Draw rectangle with rounded corners as background

Question

Is any ways to make this figure with only html & css?

Temani Afif · Accepted Answer · 2017-11-26 10:46:51Z

6

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>

answered Nov 26, 2017 at 10:46

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bhansa · Accepted Answer · 2017-11-26 10:33:15Z

3

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>

edited Nov 26, 2017 at 10:33

bhansa

7,5763 gold badges35 silver badges58 bronze badges

answered Nov 26, 2017 at 10:00

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

1 Comment

Pedram Over a year ago

@bhansa This works too, not -20 but transform: skew(-10deg); works.

Collectives™ on Stack Overflow

Css - Draw rectangle with rounded corners as background

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related