css Question posted in
Some basic documentation can be found here.

CSS – Box with Slanted and Rounded Corners

I am currently working on a Web Project and am facing some issue related to CSS. I need help with finding a Solution (responsive) for the interface elements that I am pasting below.

I have gone through multiple approaches to achieve this using CSS (available across internet) but I am unable to make it work perfectly. Cut Opposite Corners (45 deg. left top and bottom right) – I can do that; One slant greater than the other – I can do that; rounding the remaining two corner (right top and bottom left) – I can do that.

What I am failing at is, rounding the edges of the slant slightly while being able to control the rounding (should be independent) of other two corners (top right and bottom left).

A help in this regard will be highly appreciated!

The Required Shapes

.box {
  position: relative;
  border: 10px;
  height: 100px;
  width: 200px;
  padding: 40px 0px 10px 40px;
  /* border-radius: 20px; */
}
.box:before {
  border-radius: 20px;
  content: "";
  position: absolute;
  inset: 0;
  background: #FFCC00;
  clip-path: polygon(0 40px,40px 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%,0 40px,10px  calc(40px + 4.14px),10px calc(100% - 10px),calc(100% - 40px - 4.14px) calc(100% - 10px),calc(100% - 10px) calc(100% - 40px - 4.14px),calc(100% - 10px) 10px,calc(40px + 4.14px) 10px,10px calc(40px + 4.14px));
}
<div class="box">
  Hello World!
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I did find a solution using SVG and Gradients here on SO but the limitation I was facing is the independent rounding-off of the opposite corners and also when the box size is small, the slant becomes more rounded and does not appear very neat:

    .box {
  --all:0px;
  --b:pink;
  
  width:300px;
  height:150px;
  display:inline-block;
  margin:10px;
  filter:url(#round2);
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--img,red);
  -webkit-mask:
     linear-gradient(  45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
     linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
     linear-gradient( 135deg, transparent 0 var(--top-left,var(--all))    ,#fff 0) top left,
     linear-gradient(-135deg, transparent 0 var(--top-right,var(--all))   ,#fff 0) top right;
   -webkit-mask-size:50.5% 50.5%;
   -webkit-mask-repeat:no-repeat;
}

body {
  background:grey;
}
    <div class="box" style="--top-left:10px;--bottom-right:20px;--img:radial-gradient(red,yellow);--b:white;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="round2">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>


  2. 0

    A flexible way to achieve this is using a combination of CSS clip-path, pseudo-elements, and border-radius:

    .box {
  position: relative; /* To position pseudo-elements */
  width: 200px;      /* Adjust width as needed */
  height: 100px;     /* Adjust height as needed */
  padding: 20px;     /* Adjust padding as needed */
  overflow: hidden;  /* Hide any overflow from rounded corners */
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FFCC00; /* Your desired background color */

  /* Slanted Edges */
  clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px) );
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* Rounded Corners & Slant Edges */
  border-radius: 15px;  /* Control corner rounding */
}

    Detailed Explanation:

    1. box: The main container sets up relative positioning and overflow: hidden.
    2. .box::before: This pseudo-element creates the slanted shape.
    3. clip-path: Defines the angled cut. Adjust the pixel values (e.g., 20px) to control slant depth.
    4. .box::after: This pseudo-element handles the rounding.
    5. border-radius: Rounds the corners as well as the slant edges where the cut meets the straight sides.

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search