0

I would like to create a button with a special shape (border) like the attached image. Is that even possible with css?

special shape

Andres SK
  • 10,779
  • 25
  • 90
  • 152

2 Answers2

1

I tried to replicate this button but there are some issues with it:

  • I have used clip-path property to draw a custom border for the button, however, you have to mention the height and width properties separately or instead just let it span the default length, i.e. it's container dimensions but I had to mention height and width properties due to the reason in the following points

  • Thanks to this answer for a similar problem of adding border to a clipped path element, which states that it's not possible to add a border to a clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out. I used the solution that's mentioned in that answer, which is use a div as the background of this button with slightly bigger dimensions with the same clipped path but of different color which acts as a border to the button

  • Finally, I had to mention the dimensions of the parent div which acts as a background so that I could know the exact values of the dimension of the container and hence I could use them to know how much height and width should the button have

div {
  display: inline-block;
  position: relative;
  background: red;
  -webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
  height: 60px;
  width: 140px;
}

button {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 56px;
  width: 136px;
  -webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
  font-size: 20px;
  text-align: center;
  color: white;
  background: pink;
  border: none;
}
<div class="btn_bg">
  <button>Certified?<br>Let us know</button>
</div>
Geeky Quentin
  • 2,469
  • 2
  • 7
  • 28
0

you can use this code with clip-path

.outside {
    position: relative;
    width: 70vmin;
    height: 23vmin;
    background: tomato;
    clip-path: polygon(85% 0%, 85% 68%, 68% 100%, 0% 100%, 0% 78%, 0% 0%, 0% 0%);
}
.inside {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: white;
    clip-path: polygon(85% 0%, 85% 68%, 68% 100%, 0% 100%, 0% 78%, 0% 0%, 0% 0%);
border:none;
}
<div class="outside">
  <button class="inside">

  </button>
</div>
Gaurav
  • 194
  • 12