html - How to create a custom shapes using CSS? -

for eg. need able create key shape using css

jsbin convenience

you can try this:

#key {    margin: 50px 0 0 100px;    width: 200px;    height: 30px;    border-radius: 30px;    position: relative;    background: red;  }  #key:after {    content: '';    position: absolute;    bottom: 100%;    right: 20px;    height: 20px;    width: 50px;    background: red;  }  #key:before {    content: '';    position: absolute;    border: 30px solid red;    border-radius: 50%;    height: 60px;    width: 60px;    left: -100px;    top: 50%;    margin-top: -60px;  }

<div id="key"></div>