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. — CBroe, Apr 11 '18 at 10:40
I have a solution with CSS, if you give me some time to construct it. — Marcos Pérez Gude, Apr 11 '18 at 11:02
related: https://stackoverflow.com/questions/30711203/how-do-i-create-a-teardrop-in-html — Danield, Apr 11 '18 at 11:48

Marcos Pérez Gude · Accepted Answer · 2018-04-12T19:36:45.957

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 '18 at 19:36

answered Apr 11 '18 at 11:06

Marcos Pérez Gude

21,869
4
38
69

i think the difficult part is not only the shape but the gradient of the shape – Temani Afif Apr 11 '18 at 11:08
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 Apr 11 '18 at 11:13
@TemaniAfif I achieved the white background. Just with `::after` and `::before`. I will explain on post. – Marcos Pérez Gude Apr 11 '18 at 11:15
i understand what you ahve done ;) but now you are missing the transparent part ... not sure if the OP need it or not – Temani Afif Apr 11 '18 at 11:16
Amazing! Worked like a charm. Thanks for the solution but more importantly for pointing in the right direction – Shashank Agrawal Apr 11 '18 at 19:10

Jamie Buttons Coulter · Answer 2 · 2018-04-11T11:23:44.823

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>

This is awesome. This is exactly I wanted but I learned this new thing. Thanks for the answer & the time — Shashank Agrawal, Apr 11 '18 at 18:27

score -2 · Answer 3 · answered Apr 11 '18 at 10:59

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;
}

Not the exact design/shape I want. Other answer helped but thanks for the time — Shashank Agrawal, Apr 11 '18 at 18:24

How can we make this shape using CSS

3 Answers3