Html Question posted in
Some basic documentation can be found here.

Html – How do I give gradient and make it a semicircle?

enter image description here

I can give a div this gradient and make it absolute and place it at the right position, but how do I make it semi-circle?

  <div
        className="absolute top-[50%] right-[-600px] w-[50%] h-[50%] opacity-40"
        style={{
          background:
            "linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%)",
          zIndex: -1
        }}
      ></div>

Adding tailwind class rounded-full does not help.

Tags:

2

Answers


  1. 0

    Have the left corner radii be 999px via rounded-l-full. Also for a true semicircle, you’d want to have the width to be half of the height.

    <script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div
  class="w-48 h-96 opacity-40 rounded-l-full"
  style="background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%)"
></div>
    Login or Signup to reply.
  2. 0

    You can use border-radius to achieve this, just make the radius two times smaller than your height or vise-versa, depending on how you want the half-circle to layout.

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 0.5em; 
}

.semi-circle { 
  --height: 100px;
  --width: 50px;
  width: var(--width);
  height: var(--height);
  background-color: #48abe0;
  border-radius: 0 var(--width) var(--width) 0;
  background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%);
}

.semi-circle2 { 
  --height: 100px;
  --width: 50px;
  width: var(--width);
  height: var(--height);
  background-color: #48abe0;
  border-radius: var(--width) 0 0 var(--width);
  background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%);
}

.semi-circle3 { 
  --height: 50px;
  --width: 100px;
  width: var(--width);
  height: var(--height);
  background-color: #48abe0;
  border-radius: var(--width) var(--width) 0 0;
  background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%);
}

.semi-circle4 { 
  --height:  50px;
  --width: 100px;
  width: var(--width);
  height: var(--height);
  background-color: #48abe0;
  border-radius: 0 0 var(--width) var(--width);
  background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%);
}

.semi-circle-rotated { 
  --height: 100px;
  --width: 50px;
  width: var(--width);
  height: var(--height);
  background-color: #48abe0;
  border-radius: 0 var(--width) var(--width) 0;
  background: linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%);
  transform: rotate(45deg);
}
    <div class="flex">
  <div class="semi-circle"></div>
  <div class="semi-circle2"></div>
  <div class="semi-circle3"></div>
  <div class="semi-circle4"></div>
  <div class="semi-circle-rotated"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search