CODEWITHSUNDEEP
csscss-shapes
Sarika Tyagi
Sarika Tyagi

Reputation: 21

Slanted div with rounded corners

How can I implement the following shape using CSS?

The right side should be slanted and the top corners should be rounded :

Slanted div with top rounded corners

Upvotes: 2

Views: 2419

Answers (3)

AnuragR1902
AnuragR1902

Reputation: 1

One line css code i.e., "clip-path" property, it can even work on div tags check out https://bennettfeely.com/clippy/ for examples or simple code snippets

Upvotes: 0

web-tiki
web-tiki

Reputation: 103750

You can use pseudo-elements, border-radius and transform rotate to create the rounded edges and the oblique right part :

output : FIDDLE

Slanted div with rounded borders

div{
  display:inline-block;
  padding:1em 5em 1em;
  position:relative;
  overflow:hidden;
  border-top-left-radius: 10px;
}
div:after{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-color:#E70101;
  z-index:-1;    
  border-top-right-radius: 15px;
    
  -ms-transform: skewX(10deg);
  -webkit-transform: skewX(10deg);
  transform: skewX(10deg);
  
 -ms-transform-origin:100% 100%;
  -webkit-transform-origin:100% 100%;
  transform-origin:100% 100%;
}
<div>Some text</div>

Upvotes: 2

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13526

Another option is to use 3d perspective transform: http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/

Upvotes: 0

Related Questions