How can we make this shape using CSS

Question

How can we make this shape using CSS?

I'm able to write the below code using CSS but the shape generated output is a bit off. Can we do that using CSS?

.btn-arrow {
  width: 15px;
  height: 24px;
  border: 2px solid red;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border-left: 0;
  display: inline-block;
  position: relative;
}

.btn-arrow:after,
.btn-arrow:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.btn-arrow:after {
  border-right-color: white;
  border-width: 12px;
  margin-top: -12px;
}

.btn-arrow:before {
  border-right-color: red;
  border-width: 14px;
  margin-top: -14px;
}

body {
  padding: 20px;
}

<div class="btn-arrow"></div>

The rounding in your shape goes on for more than 180 degrees, so you can’t expect to achieve that with two border-radius that cover/span an exact 90 degree section each. You would have to start with a fully rounded element, and then overlap parts of it with the actual “right angle/straight edge” shape ... which means, if you need it to be transparent/work on multi-color backgrounds, this is pretty much out right away. — C3roe
– C3roe, Commented Apr 11, 2018 at 10:40
I have a solution with CSS, if you give me some time to construct it. — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Apr 11, 2018 at 11:02

Marcos Pérez Gude · Accepted Answer · 2018-04-12 19:36:45Z

3

With CSS you can achieve that.

Just create ::after and ::before pseudoelements and the main box rotate 45 degrees. You can adjust the degrees on the linear-gradient part instead of "to right" sentence.

This trick is necessary because border-image and border-radius can't live both on the same element.

You can see more about this:

.shape {
  position:relative;
  width: 100px;
  border-radius: 100% 100% 100% 0;
  height: 100px;
  transform: rotate(45deg);
  margin: 0 auto;
  background: white;
  background-clip: padding-box;
}
.shape::after {
    position: absolute;
    top: -8px; 
    bottom: -8px;
    left: -8px; 
    right: -8px;
    background: linear-gradient(to right, #fe3870, #fc5d3e);
    content: '';
    z-index: -1;
    border-radius: 100% 100% 100% 0;
}
.shape::before {
    position: absolute;
    top: 8px; 
    bottom: 8px;
    left: 8px; 
    right: 8px;
    background: white;
    content: '';
    z-index: 1;
    border-radius: 100% 100% 100% 0;
}

<div class="shape">
</div>

edited Apr 12, 2018 at 19:36

answered Apr 11, 2018 at 11:06

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Temani Afif Over a year ago

i think the difficult part is not only the shape but the gradient of the shape

Marcos Pérez Gude Over a year ago

I am using the border-image property but seems to be incompatible with border radius, so I achieved without background. I will following try.

Marcos Pérez Gude Over a year ago

@TemaniAfif I achieved the white background. Just with ::after and ::before. I will explain on post.

Temani Afif Over a year ago

i understand what you ahve done ;) but now you are missing the transparent part ... not sure if the OP need it or not

Shashank Agrawal Over a year ago

Amazing! Worked like a charm. Thanks for the solution but more importantly for pointing in the right direction

Jamie Buttons Coulter · Accepted Answer · 2018-04-11 11:23:44Z

3

One of many possible solutions in just CSS:

This solution only requires one pseudo element.

.btn-arrow {
  width: 44px;
  height: 44px;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: -webkit-linear-gradient(left, rgba(232,51,105,1) 0%,rgba(235,94,67,1) 100%); /* Chrome10-25,Safari5.1-6 */
  transform:rotate(45deg);
  position: relative;
}

.btn-arrow::after {
  display: block;
  width: 30px;
  height: 30px;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: white;
  position: absolute;
  content: '';
  top: 7px;
  left: 7px;
}

body {
  padding: 20px;
}

<div class="btn-arrow"></div>

edited Apr 11, 2018 at 11:23

answered Apr 11, 2018 at 11:15

Jamie Buttons Coulter

5132 silver badges12 bronze badges

1 Comment

Shashank Agrawal Over a year ago

This is awesome. This is exactly I wanted but I learned this new thing. Thanks for the answer & the time

Diyen Momjang · Accepted Answer · 2018-04-11 10:59:13Z

-2

Adjust the CSS to look like this

.btn-arrow {
      width: 30px;
    height: 30px;
    border: 2px solid red;
    border-radius: 100%;
    border-left: 0;
    display: inline-block;
    position: relative;
}

.btn-arrow:after,
.btn-arrow:before {
  right: calc(100% - 6px);
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.btn-arrow:after {
  border-right-color: white;
  border-width: 12px;
  margin-top: -12px;
}

.btn-arrow:before {
  border-right-color: red;
  border-width: 14px;
  margin-top: -14px;
}

body {
  padding: 20px;
}

answered Apr 11, 2018 at 10:59

Diyen Momjang

1,8511 gold badge14 silver badges11 bronze badges

1 Comment

Shashank Agrawal Over a year ago

Not the exact design/shape I want. Other answer helped but thanks for the time

Collectives™ on Stack Overflow

How can we make this shape using CSS

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related