2

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

0

2 Answers 2

2

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>

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.