CSS custom shape with irregular rectangle and border

Question

I'm trying to create a button like this:

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

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 ?

The text is straight... I that on purpose? It looks awkward -being part of a highly expressive 3Dish parent... — Roko C. Buljan, Jan 19 '20 at 19:29
@TemaniAfif Very close but this is the result: https://jsfiddle.net/zn5oj8bh/ .The borders don't work. — IkePr, Jan 19 '20 at 19:33
@RokoC.Buljan Yes, the text must be straight. It's a button. — IkePr, Jan 19 '20 at 19:33
@RokoC.Buljan we should not apply the 3D to the parent but apply it to a pseudo element that you place behind — Temani Afif, Jan 19 '20 at 19:41
@temani Yes. But from any perspective as a designer it looks strangely awkward... It was just a question/comment just to double-check. Thank you for the comment though. — Roko C. Buljan, Jan 19 '20 at 19:49

Temani Afif · Accepted Answer · 2020-01-19T20:10:34.950

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>

This is amazing. This is exactly like in the picture! Amazing job @Temani Afif — IkePr, Jan 19 '20 at 19:56
This will not work in IE11. Not that I personally care, just saying... — Roko C. Buljan, Jan 19 '20 at 21:44

sina_r · Answer 2 · 2020-01-19T19:47:12.083

1

This works kinda like you want it:

button{
   width: 150px;
   height: 50px;
   -webkit-clip-path: polygon(0% 20%, 92% 14%, 88% 88%, 0% 100%);
   clip-path: polygon(0% 20%, 92% 14%, 88% 88%, 0% 100%);
   background: black;
   color: white;
}

<button class="parallelogram"> Hello button </button>

EDIT:

You can create an SVG that looks exactly like your button here: https://vectr.com/new

You can add border + shadow and simply copy the html.

edited Jan 19 '20 at 19:47

answered Jan 19 '20 at 19:32

sina_r

524
2
7

Very close: https://jsfiddle.net/zn5oj8bh/1/ But the border doesn't work and the box-shadow. – IkePr Jan 19 '20 at 19:35

G-Cyrillus · Answer 3 · 2020-01-19T19:52:50.483

1

You could use a pseudo element to set your perspective effect:

example

.parallelogram {
  width: 100px;
  height: 50px;
  position: relative;
  color: white;
  /* appearance:none; could be used too */
  background: none;
  border: none;
  cursor: pointer;  /* show where and that i'm clickable */
}

.parallelogram:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 110%;  /* might need to be resized */
  height: 100%;
  transform: /* tune the rotation and perspective values to your needs */
    perspective(200px) 
    rotatey(35deg) 
    rotatex(-25deg)
    ;
  background: black;
  border: 2px solid #ec00f4;
  box-shadow: 0px 3px 8px #ec00f4;
}

<button class="parallelogram"> Hello button </button>

screenshot from firefox :

edited Jan 19 '20 at 19:52

answered Jan 19 '20 at 19:48

G-Cyrillus

101,410
14
105
129

@RokoC.Buljan ?? it's there , which browser do you use ? *(made and added a screenshot from latest of today Firefox)* – G-Cyrillus Jan 19 '20 at 19:50
This is very good and close @G-Cyr, but Temani made a better version. Thank you again so much ! – IkePr Jan 19 '20 at 19:57
@IkePr that was an hint :) . have fun playing with CSS. – G-Cyrillus Jan 19 '20 at 19:58

score -1 · Answer 4 · answered Jan 19 '20 at 19:39

Add a span, with the class .unskew and do the opposite of your skew effect on the background and change the display rule.

Example:

CSS

.parallelogram {
    transition: background 0.3s;
    transform: skew(-25deg);
    /* SKEW */
}

.unskew{
    display: block;
    /* block or inline-block is needed */
    text-decoration: none;
    padding: 5px 10px;
    font: 30px/1 sans-serif;
    transform: skew(25deg);
    /* UNSKEW */
    color: inherit;
}

HTML

<button class="parallelogram"><span class="unskew" >Hello button</span></button>

CSS custom shape with irregular rectangle and border

4 Answers4