CSS tricks for creating circular border-radius effects

While working with react, I encountered an issue with a circle component that I'm trying to display on the screen. The problem arises when certain view sizes are reached, causing small artifacts like flat ends to appear in some of the circles.

View width 980px shows circles with flat sides

Ball hitbox reference

Container hitbox reference

.ballholder{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color:rgb(206,35,212);
    padding:0.5vw;
    border-radius: 5%;
    border:2px solid black;
}
.aball{
  background-image: linear-gradient(to bottom right, white, whitesmoke, rgb(150,150,150));
    color:black;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    width:2vw;
    height:2vw;
    padding:0.05vw;
    margin:0.20vw;
    font-size:1.3vw;
}

Below is the parent component code:

import React, { Component } from "react";
import { Switch, Route, Redirect, Link } from "react-router-dom";
import Ball from "./Ball";
import "../App.css";

export default class Ballswitch90 extends Component {
  constructor(props) {
    super(props);
      this.state = {

    };
  }

  render() {
    const balls = this.state.balls.map((a, i) =>
      a ? (
        <Ball p={{ num: i + 1, clicked: false }} />
      ) : (
        <Ball p={{ num: i + 1, clicked: true }} />
      )
    );
    return <div className="ballholder">{balls}</div>;
  }
}

Code for the Ball component:

import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from "react-router-dom"
import '../App.css'

export default class Ball extends Component {
    constructor(props) {
        super(props)
        this.state = {
            num:props.p.num,
            clicked:props.p.clicked
        }
    }

    render() {
        return (
            <div>
                {this.state.clicked
                ?
                <div className="aball">{this.state.num}</div>
                :
                <div className="aballred">{this.state.num}</div>
            }
            </div>
        )
    }
}

I have attempted to adjust padding and margins, but it only affected the size at which the flats appeared.

Answer №1

It is likely that the CSS properties related to height and width are causing issues in your code.

Check out this code snippet which functions correctly:

https://codesandbox.io/embed/n6jrm1k2l

.aball {
  border-radius: 50%;
  background-color: white;
  border: 1px solid darkred;
  padding: 1em;

  /* Centering the text content */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: black;
}

.aball:after {
  content: "";
  display: block;

  /* Ensuring square shape of the element */
  height: 0;
  width: 100%;
  padding-bottom: 100%;
}

.aball__value {
  /* Setting overflow to visible to not affect the square styles */
  overflow: visible;
  height: 0;

  /* Vertical centering of text with a zero height */
  margin-top: -1em;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Custom background options for Wordpress developer

I have been exploring the WordPress codex to learn about incorporating custom background options, similar to this example $defaults = array( 'default-color' => '', 'default-image' => '&apo ...

How to toggle two classes simultaneously using JQuery

Check out this code snippet: http://jsfiddle.net/celiostat/NCPv9/ Utilizing the 2 jQuery plugin allows for the following changes to be made: - The background color of the div can be set to gray. - The text color can be changed to red. The issue arises wh ...

Tips for positioning the cursor at the beginning of text and shifting the focus to the start while utilizing the MaterialUI Input component

I have scoured various online forums for a solution to this issue, but none of the suggestions seem to work. Although I managed to position the cursor at the beginning of the text, it did not shift the focus accordingly. Here is the code snippet for the co ...

Utilizing Material UI to access CSS classes in React

Seeking guidance on incorporating CSS within another CSS in React using Material-UI. Although I am familiar with using @extends and @mixin for applying CSS rules, I encountered a challenge when working with React and Material-UI. How can I address this iss ...

Can someone assist me in figuring out how to solve selecting multiple radio buttons at once

<script type="text/javascript"> let x = "1.html"; let y = "2.html"; function redirectPage(form){ for(let i=0; i<form.length; i++) { if(form.answerq[i].checked && form.answerw[i].checked && f ...

What specific checks and alerts are triggered by React.StrictMode?

When utilizing React.StrictMode and React.Fragment, according to the React documentation: Both Fragment and StrictMode do not display any visible UI. Instead, they trigger additional checks and warnings for their child components. Question: What specif ...

Adjust the color of a label based on a set threshold in Chart.js

Can anyone help me with my Chart.js issue? Here is a link to the chart: https://i.sstatic.net/RL3w4.gif I am trying to change the color of the horizontal label when it falls between 70.00 - 73.99. Does anyone know if there's a specific option for th ...

Having difficulty setting up and launching a React Application

When attempting to execute the create-react-app command, I am encountering some issues. Below is the sequence of commands that I am trying: create-react-app my-app cd my-app npm start Unfortunately, I am facing errors while running the above commands. A ...

Cloud Firestore collection not appearing in Cloud Firestore database

Currently, I am following a tutorial on creating a Google Drive clone. The tutorial can be found here. At the 24-minute mark, the instructor creates a database in Cloud Firestore and when adding a folder, it is reflected in the database. However, when I at ...

Tips for including multiple spaces within a cell of a table

I've come across an issue while working on a table and attempting to insert text with multiple spaces. For example, I want to add the text HELLO<1stSPACE><2ndSPACE>WORLD. However, when I enter it as HELLO WORLD, it only displays with a si ...

What is the procedure for automatically playing the next audio track in HTML5 after the current one finishes playing

When trying to play a single MP3 file, the code below is designed to skip to a specific part of the track and then start playing from that position. However, despite the cursor moving to the correct spot in the MP3, it fails to play upon clicking the Sta ...

What is the best way to adjust the spacing between components to prevent overlapping?

I'm looking to adjust the spacing between the textfield and button components so they don't overlap. I want to create some space between them but I'm not sure how to achieve this. I'd like to have at least 1-2 spaces added between the ...

Discover the specific span being modified within a div

Recently, I coded some HTML: <div id="contentbox" contenteditable="true"><span value="1">Hello</span><span value="2">Stack</span><span value="3">over</span> flow</div> Additionally, I used jQuery to enhance ...

ES lint is in need of the redux state to be added as a useEffect dependency, potentially leading to an endless cycle

Within my component, I am utilizing the useSelector hook to retrieve state from Redux, which is in the form of an object. One of the properties within this state object contains a key with a previous value. Upon mounting the component, I aim to execute a n ...

AngularJs Number Formatting: A Step-By-Step Guide

Is there a way to format a number from 10000 to 10,000.00 using only HTML and the ng-Model directive, without involving the controller file? I attempted to achieve this in the controller file through logic, but it always returns the number in the "10,00 ...

What could be causing certain Bootstrap classes and CSS properties to not function properly in my code?

My goal was to create a website template using BOOTSTRAP and CSS. However, I encountered some issues in my code where certain Bootstrap classes are not functioning as expected, such as lead, font-weight, color, bg-color, etc. I noticed that if I apply a Bo ...

Is there a setting causing Webpack to not rebuild when there are changes to the CSS?

I have configured postcss-loader and style-loader on webpack, and I am using webpack-dev-server. However, every time I make changes to the CSS, webpack does not rebuild automatically. The script for webpack dev server that I use in npm scripts: webpack-d ...

Unable to align divs horizontally

On my webpage, I have set up two divs - Box1 and Box2. Within Box2, there are two nested divs called Box2-1 and Box2-2. However, when I view the page, Box1 and Box2 do not align side-by-side as expected. Instead, Box1 moves downwards and lines up with the ...

Guide to implementing a real-time countdown timer for days, hours, minutes, and seconds leading up to a specific date and time with JavaScript

Implement a dynamic countdown timer in JavaScript that counts up to a specific date. See the example image for reference: here ...

What is the best way to export image paths using require() from a single index.js file in a React Native project?

I am looking for a way to efficiently export all images from a single file named index.js, so that in the future, if I need to change the path of an image, I only have to make changes in one file. For example: export {default as avatar} from './avata ...