Search code examples
csscss-shapes

CSS custom shape with irregular rectangle and border

I'm trying to create a button like this:

enter image description here

After researching online, I only came up with making a parallelogram. But this is the result:

enter image description here

Code:

.parallelogram {
  width: 100px;
  height: 50px;
  transform: skew(25deg);
  background: black;
  border: 1px solid #EC00F4;
  color: white;
  box-shadow: 0px 3px 8px #EC00F4;
}
<button class="parallelogram"> Hello button </button>

Is there a way to make the edges go where I want (like in the picture) but without moving the text ?

Solution

  • Use clip-path on pseudo elements. The trick is to consider the same clip-path and apply a scale transformation to one pseudo element to simulate the border. Simply adjust the value of the polygon to get the needed result.

    Hover to see a different clip-path:

    .parallelogram {
   padding:20px 45px;
   font-size:30px;
   color: white;
   border:none;
   background:none;
   outline:none;
   position:relative;
   z-index:0;
   margin:15px;
   filter:drop-shadow(0px 30px 25px rgba(236, 0, 244, 0.45));
}
.parallelogram:before,
.parallelogram:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   left:0;
   right:0;
   bottom:0;
   clip-path: polygon(0 11%, 100% 0, 90% 88%, 3% 96%);
   transition:1s all;
   background:#000;
}
.parallelogram:before {
  background:#EC00F4;
  transform:scale(1.05,1.12);
}

.parallelogram:hover:before,
.parallelogram:hover:after {
   clip-path: polygon(5% 2%, 100% 5%, 100% 100%, 0% 94%);
}
    <button class="parallelogram"> Hello button </button>
<button class="parallelogram"> button </button>
<button class="parallelogram"> A </button>

    You can also consider pixel value to keep the same shape whataver the content inside:

    .parallelogram {
   padding:20px 45px;
   font-size:30px;
   color: white;
   border:none;
   background:none;
   outline:none;
   position:relative;
   z-index:0;
   margin:15px;
   filter:drop-shadow(0px 30px 25px rgba(236, 0, 244, 0.45));
}
.parallelogram:before,
.parallelogram:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   left:0;
   right:0;
   bottom:0;
   clip-path: polygon(0 10px, 100% 0, calc(100% - 8px) calc(100% - 15px), 5px calc(100% - 8px));
   transition:1s all;
   background:#000;
}
.parallelogram:before {
  background:#EC00F4;
  transform:scale(1.05,1.12);
}

.parallelogram:hover:before,
.parallelogram:hover:after {
   clip-path: polygon(0 5px, 100% 0, 100% 100%, 10px calc(100% - 20px));
}
    <button class="parallelogram"> Hello button </button>
<button class="parallelogram"> button </button>
<button class="parallelogram"> A </button>