CODEWITHSUNDEEP
csscss-shapes
Dmitrijs Zubriks
Dmitrijs Zubriks

Reputation: 2806

How to create a shape with one slanted side and rounded corners on the opposite side?

Is it possible to create this shape in CSS3? How? I am stuck: http://dabblet.com/gist/2962169

shape

h1 {
  background-color: #434b82;
  border-radius: 20px 0 0 20px;
  transform: skew(-20deg);
}
<h1>TEST</h1>

Upvotes: 2

Views: 667

Answers (2)

Mohammad Usman
Mohammad Usman

Reputation: 39322

We can use linear-gradient() to draw this shape on rectangular element.

This trick uses the idea of dividing whole shape in two parts and then draws each part on the background independently.

div {
  background-image: linear-gradient(to left, #434b82, #434b82),
                    linear-gradient(to left top, transparent 50%, #434b82 50%);

  background-position: top right 20px, 100% 100%;
  background-size: 100% 100%, 20px 100%;
  background-repeat: no-repeat;
}


div {
  background-image: linear-gradient(to left, #434b82, #434b82),
                    linear-gradient(to left top, transparent 50%, #434b82 50%);
  background-position: top right 20px, 100% 100%;
  background-size: 100% 100%, 20px 100%;
  background-repeat: no-repeat;
  border-radius: 30px 0 0 30px;
  line-height: 50px;
  padding: 0 25px;
  height: 50px;
  width: 200px;
  color: #fff;
}
<div>
    Some Text Here...
</div>

Upvotes: 0

Musa
Musa

Reputation: 97672

You mean somthing like this

h1 {
    background-color: #434b82;
    border-radius: 20px 0 0 20px;
    width:500px;
    height:40px;
    border-right: 40px solid transparent;
}
h1:after{
    position:absolute;
    width: 80px;    
    border-top: 40px solid #434b82;
    margin-left:500px;
    border-right: 20px solid transparent;
    content:"";
}

<h1></h1>​

Upvotes: 4

Related Questions