CODEWITHSUNDEEP
htmlcss
Shashank Agrawal
Shashank Agrawal

Reputation: 25797

How can we make this shape using CSS

How can we make this shape using CSS?

enter image description here

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>

Upvotes: 3

Views: 322

Answers (3)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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>

Upvotes: 3

Jamie Buttons Coulter
Jamie Buttons Coulter

Reputation: 513

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>

Upvotes: 3

Diyen Momjang
Diyen Momjang

Reputation: 1851

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

Upvotes: -2

Related Questions