Div with sloping side and round corners

Question

I am currently creating a website that requires buttons to have a left side slope . The website is responsive and the button requires rounded corners . I am also trying to avoid using background images.

Can someone show me a solution? Ignore the icon on the button, I can do it. I just need the slope side.

Jsfiddle example

body { background: lightblue; font-family: sans-serif; } div { background: purple; width: 200px; padding: 30px; border: 3px solid white; color: white; } 

 <div>Some Text</div> 

Answer 1

Note. . I am adding a separate answer, because although the answers that I linked in the comment seem to give a solution, it is a bit more complicated due to the presence of the border also along with the border of the radius.

A form can be created using the following parts:

• One main element of the container that is positioned relatively.
• Two pseudo-elements that are approximately half the width of the parent element. One element is skewed to create a skewed left side, while the other is not skewed.
• The skewed pseudo-element is located on the left, and the normal element is located to the right of the container element.
• A skewed pseudo-element has only upper, left, and lower borders. The right border is omitted, as it appears right in the middle of the form. For a pseudo-element that is not skewed, the left border is excluded for the same reason.
• The left border of the skewed pseudo-element is slightly thicker than the other borders, because the skew makes the border thinner than it actually is.

I also added a hover effect to the fragment to demonstrate the responsive nature of the form.

 .outer { position: relative; height: 75px; width: 300px; text-align: center; line-height: 75px; color: white; text-transform: uppercase; } .outer:before, .outer:after { position: absolute; content: ''; top: 0px; height: 100%; width: 55%; background: purple; border: 2px solid white; border-left-width: 3px; z-index: -1; } .outer:before { left: 0px; border-radius: 20px; border-right: none; transform: skew(20deg); transform-origin: top left; } .outer:after { right: 0px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-left: none; } /* Just for demo of responsive nature */ .outer{ transition: all 1s; } .outer:hover{ height: 100px; width: 400px; line-height: 100px; } body{ background: lightblue; } 

 <div class='outer'> Call me back </div> 

Advantage:

• The big advantage of this approach is that it provides an elegant return. That is, in browsers that are not compatible with CSS3, it will look like a regular button with rounded corners (and without an inclined side).
• The background of the page (or container element) does not have to be a solid color.
• The shape itself may have non-solid colors (i.e. images or gradients) as the background. This will require additional configuration, but the approach itself will remain the same.

---

In the snippet below, I gave each component a different color to visually illustrate how the shape is achieved:

 .outer { position: relative; height: 75px; width: 300px; text-align: center; line-height: 75px; color: white; text-transform: uppercase; } .outer:before, .outer:after { position: absolute; content: ''; top: 0px; height: 100%; width: 55%; background: purple; border: 2px solid white; border-left-width: 3px; z-index: -1; } .outer:before { left: 0px; border-radius: 20px; border-right: none; transform: skew(20deg); transform-origin: top left; background: seagreen; border-color: red; } .outer:after { right: 0px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-left: none; background: yellowgreen; border-color: maroon; } /* Just for demo of responsive nature */ .outer{ transition: all 1s; } .outer:hover{ height: 100px; width: 400px; line-height: 100px; } body{ background: lightblue; } 

 <div class='outer'> Call me back </div> 

Answer 2

Yes, you can use a white overlay using the css pseudo-element before or after , like this

 .slantButton { position: relative; background-color: #8D3F81; border: 1px solid transparent; border-radius: 5px 5px 5px 20px; color: #fff; padding: 10px 20px; text-transform: uppercase; font-size: 18px; cursor: pointer; outline: 0; } .slantButton:before { content: ''; position: absolute; top: 0; left: -5px; width: 0; height: 0; border-bottom: 42px solid #fff; border-right: 16px solid transparent; } 

 <button class="slantButton">Call Me Back</button> 

Explaination

I applied a different border radius in the lower left corner using

border-radius: 5px 5px 5px 20px;

Then use the css triangle in the pseudo-element. Made one white overlay of the triangle and made a slanting edge, as you suggested

  .slantButton { position: relative; background-color: #8D3F81; border: 1px solid transparent; border-radius: 5px 5px 5px 20px; color: #fff; padding: 10px 20px; text-transform: uppercase; font-size: 18px; cursor: pointer; outline: 0; } .slantButton:before { content: ''; position: absolute; top: 0; left: -5px; width: 0; height: 0; border-bottom: 42px solid rgba(0,0,0,0.5); border-right: 16px solid transparent; } 

 <button class="slantButton">Call Me Back</button> 

Answer 3

This is also possible with CSS border-radius' by setting multiple values.

This has a little more curvature than your example, but it is much cleaner and does not require additional elements or pseudo-elements.

 body { background: lightblue; font-family: sans-serif; } div { background: purple; width: 200px; padding: 30px; border: 3px solid white; border-radius: 15px; border-bottom-left-radius: 50px 150px; color: white; } 

 <div>Some Text</div>