Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
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.
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>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>