Shape With a Slanted Side (Responsive)

$(document).ready(function() {  $('#increasew-vector').on('click', function() {    $('.vector').css({      'width': '150px',      'height': '100px'    });  });  $('#increaseh-vector').on('click', function() {    $('.vector').css({      'width': '100px',      'height': '150px'    });  });  $('#increaseb-vector').on('click', function() {    $('.vector').css({      'width': '150px',      'height': '150px'    });  });})

div {  float: left;  height: 100px;  width: 100px;  margin: 20px;  color: beige;  transition: all 1s;}.vector {  position: relative;}svg {  position: absolute;  margin: 10px;  top: 0px;  left: 0px;  height: 100%;  width: 100%;  z-index: 0;}polygon {  fill: tomato;}.vector > span {  position: absolute;  display: block;  padding: 10px;    z-index: 1;}.vector.top > span{  height: 50%;  width: 100%;  top: calc(40% + 5px); /* size of the angled area + buffer */  left: 5px;  }.vector.bottom > span{  height: 50%;  width: 100%;  top: 5px;  left: 5px;  }.vector.left > span{  width: 50%;  height: 100%;  left: 50%; /* size of the angled area */  top: 5px;  }.vector.right > span{  width: 50%;  height: 100%;  left: 5px;  top: 5px;  }


/* Just for demo */
body {  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);}
polygon:hover, span:hover + svg > polygon{  fill: steelblue;}
.btn-container {  position: absolute;  top: 0px;  right: 0px;  width: 150px;}
button {  width: 150px;  margin-bottom: 10px;}
.vector.left{  clear: both;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="vector bottom">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,0 40,0 40,100 0,60" />  </svg></div><div class="vector top">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,40 40,0 40,100 0,100" />  </svg></div><div class="vector left">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,0 40,0 40,100 20,100" />  </svg></div><div class="vector right">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,0 20,0 40,100 0,100" />  </svg></div>
<div class='btn-container'>  <button id="increasew-vector">Increase Width</button>  <button id="increaseh-vector">Increase Height</button>  <button id="increaseb-vector">Increase Both</button></div>

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

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>​

div with slanted side and rounder corners

Note: I am adding a separate answer because though the answers that I linked in comment seem to give a solution, this one is a bit more complex due to the presence of border also along with the border-radius.

The shape can be created by using the following parts:

• One main container element which is positioned relatively.
• Two pseudo-elements which are roughly half the width of parent element. One element is skewed to produce the skewed left side whereas the other is not skewed.
• The skewed pseudo-element is positioned at the left while the normal element is positioned at the right of the container element.
• The skewed pseudo-element has only top, left and bottom borders. The right border is omitted as it would come right in the middle of the shape. For the pseudo-element that is not skewed, the left border is avoided for the same reason.
• Left border of the skewed pseudo-element is a bit more thicker than other borders because skew makes the border look thinner than it actually is.

I have also added a hover effect to the snippet to demonstrate the responsive nature of the shape.

.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>

div {  height: 50px;  width: 300px;  background-color: black;  position: relative;  overflow: hidden;}
div:after {  height: 100%;  width: 100%;  background-color: white;  position: absolute;  content: "";  transform: rotate(45deg);  transform-origin: bottom right;}

<div></div>

body{
  margin: 0;
}

.dark, .light {
  min-height: 50vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark{
  background-color: darkgrey;
  min-height: calc(50vh + 60px);
}

.dark > div, .light > div{
  font-size: 30px;
  color: black;
  font-family: Arial,sans-serif;
  }

.light{
  background-color: lightgrey;
}

.dark::before{
      content: '';
    display: block;
    width: 0;
    height: 0;
  position: absolute;
    bottom: 0;
      border-bottom: 60px solid lightgrey;
    border-left: calc(100vw - 17px) solid transparent;
}

<section class="dark">
<div>CONTENT 1</div>
</section>
<section class="light">
<div>CONTENT 2</div>
</section>

clip-path: polygon(0 21%, 100% 2%, 100% 100%, 0% 100%);

#skew {
    height: 240px;
    overflow: hidden;
}
.skew {
    background: #000;
    display: inline-block;
    height: 300px;
    width: 500px;
    margin-top: 100px;
    transform: skew(-8deg, -8deg);
}

#skew {
    padding-bottom: 20%;
    overflow: hidden;
    position: relative;
}
.skew {
    background: #000;
    position: absolute;
    top: 30%;
    right: 8%;
    left: 8%;
    height: 100%;
    transform: skew(-8deg, -8deg);
}