Prevent the line from crossing over the circle in CSS

How can I prevent the line from intersecting the circle?

I want the line to be outside the circle.

The background (in this case, of the li tag) will be transparent.

#project-wrapper {
  width: 100%;
  /* Adjusting the position of the element on the page */
  /* min-height or top margin for full use */
  /* min-height:600px;
 */
  margin: 420px 0 0 0;
  padding: 0;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
                 
... (code continues) ...
                 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?ver=4.9.8" rel="stylesheet" />
<div id="project-wrapper"><span>Your Strategy</span><span>Review</span><span>Design</span><span>Delivery</span>
  <nav id="orbital-menu" class=""><i class="fa fa-map"></i>
    <ul class="orb-master" data-children="4"><span>MENTOR BLUEPRINT</span>
      <li class="orb" name="pa"> <i class="fa fa-briefcase" aria-hidden="true"><b>Program Acceleration</b></i> </li>
      <li class="orb" name="pm"> <i class="fa fa-briefcase" aria-hidden="true"><b>Portfolio Management</b></i> </li>
      <li class="orb" name="ps"> <i class="fa fa-briefcase" aria-hidden="true"><b>Program Setup</b></i> </li>
      <li class="orb" name="pr"> <i class="fa fa-briefcase" aria-hidden="true"><b>Program Review</b></i> </li>
    </ul>
  </nav>
</div>

htmlcss

Answer №1

I faced a challenging task, but I found it enjoyable to overcome! To tackle the issue, I made adjustments to the existing CSS by relocating the large circle border to the #orbital-menu:after pseudo-element and fine-tuning the margins.

The transform-origin property was unnecessary since there were no rotations applied to #orbital-menu.

#orbital-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    margin: -140px 0 0 -140px;
    z-index: 8900 !important;
    cursor: pointer;
    box-shadow: none;
    transition: all 250ms linear;
}

#orbital-menu:after {
    border-radius: 50%;
    border: 2px solid #af6a79;
    height: 280px;
    width: 280px;
    left: 0;
    top: 0;
    clip-path: polygon(0 0, 34% 0, 50% 10%, 66% 0, 100% 0, 100% 34%, 90% 50%, 100% 66%, 100% 100%, 66% 100%, 50% 90%, 34% 100%, 0 100%, 0 66%, 10% 50%, 0 34%);
}

The solution lies in utilizing the clip-path property which reshapes the element after applying the border. I employed a clip-path maker to create the polygon for clipping out the border intersections with other circles. Directly applying this to the element itself would have also affected the child orb elements.

I took the liberty to optimize your #project-wrapper > span CSS for efficiency and provided a starting point:

#project-wrapper>span {
  position: absolute;
  color: #9a9a9a;
  font: italic 700 18px initial;
}

#project-wrapper>span:nth-child(1) {
  left: calc(50% - 42px);
  top: -28px;
}

#project-wrapper>span:nth-child(2) {
  top: 50%;
  left: -60px;
}

#project-wrapper>span:nth-child(3) {
  top: 50%;
  right: -60px;
}

#project-wrapper>span:nth-child(4) {
  bottom: -30px;
  left: calc(50% - 25px);
}

It's evident that there are numerous redundant CSS styles that can be optimized:

  • Consolidating common properties within the :nth-of-type selector
  • Eliminating vendor-prefixed properties that most modern browsers have adopted (check caniuse.com)

Here is a snippet with added styles to the body element to harmonize with your website:

Hopefully, this provides some clarity!

Answer №2

To ensure the visibility of the text labels on the li.orb circles, it is recommended to change the background color to white. The current transparent background might cause interference with the lines behind it.

#orbital-menu ul.orb-master li.orb {
  background-color: white;
}

Additionally, for better readability, it is also suggested to set the background color of the text labels to white using the following CSS:

#orbital-menu>ul>li:nth-child(3) i b,
#orbital-menu>ul>li:nth-child(5) i b {
  background-color: white;
}

Kindly note the other CSS properties provided below that control the positioning and styling of the elements within the orbital menu:

[Other CSS properties related to the orbital menu styling]

Note: This solution assumes a white background for effective text visibility. If the background is an image, an alternative approach may be required.

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

What's the best way to ensure that the iframe resolution adjusts dynamically to perfectly fit within its container?

iframe-screenshot Displayed in the image are two iframes, but at times I may need to display three. The aim is to ensure that all iframes are responsive within their containers. Below is my existing CSS styling: iframe { width: 100%; height: 1 ...

javascripthtmlcssiframe

Issues following compilation with npm run prod

I am currently working on a small website using Laravel and Tailwind CSS on shared hosting. While I am able to use a command line tool on the host, I have encountered an issue. In my local environment, Tailwind works perfectly fine. However, after running ...

cssnpmtailwind-css

How can I include multiple search forms on a single page in TYPO3 Ke_Search without any conflicts between them?

In the header of my website, I have a search form that is generated as a cObject from a content element containing a ke_search searchbox. When this form is submitted, it redirects to a /search page. In addition to this, I have subpages that are meant to se ...

htmlsearchtypo3content-management-systemtyposcript

It is impossible for 4 div elements to align in a horizontal position

Having an issue where I am trying to align 4 boxes horizontally like cards, but they are appearing in a staircase formation instead. Any help would be appreciated. I have provided the code with the issue on this jsfiddle link #first { ...

htmlcssflexbox

The Angular multi select tree feature seems to be malfunctioning

I recently incorporated a plugin called angular-multi-select-tree from GitHub into my project. Here is how I added it: First, I installed it via bower using the command bower install angular-multi-select-tree --save. This updated the bower.json file to i ...

javascriptjquerycssangularjsbower

I am having difficulty retrieving all the cssRules for certain pages

Attempting to retrieve all CSS rules using JavaScript has yielded varying results. For instance, on StackOverflow, the code used is: console.log( document.styleSheets[1].href,'rules', document.styleSheets[1].cssRules,'Should be css rules, ...

javascriptcss

interactive navigation menu with countdown feature

Looking to create an HTML/jQuery dropdown menu, but encountering a problem. The goal is for the div to slide down when the mouse hovers over the "games" navigation button and only disappear after 5 seconds of the mouse being out, not instantly. Here's ...

javascriptjqueryhtmlmenunavigation

What are some techniques for concealing a CSS transition beneath another element in both directions?

Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clev ...

javascriptjqueryhtmlcsscss-transitions

What are some best practices for integrating CSS grid layouts with React for optimal results?

My current project involves developing a Single Page Application using ReactJs and CSS grid layouts for styling components. However, I've encountered an issue where the two technologies do not seamlessly integrate: CSS grid layouts are typically appli ...

cssreactjssingle-page-application

The applet failed to load on the HTML webpage

I'm having trouble getting this applet to load on an HTML page. I've already added full permissions in the java.policy file and I'm using the default HTML file from NetBeans Applet's output. /* Hearts Cards Game with AI*/ import java.a ...

javahtmlapplet

Using Vanilla JavaScript to Disable a Specific Key Combination on a Web Page

On a completely random English-Wikipedia editing page, there exists a way to add content (for example, "test") and save it using the existing key combination of Alt+Shift+S. My goal is to specifically prevent this action without removing the save button b ...

javascriptjqueryhtmlreturnkeyboard-shortcuts

Ensure the sum is recalculated whenever the input changes by using the jQuery change event

I am creating a system that requires the total values of multiple inputs to not exceed 100. I have successfully implemented this functionality, but now I need a way to automatically adjust the total if changing one input causes it to drop below 100. Here& ...

javascriptjqueryhtml

What is the process of creating a download link for a server file in a web browser?

I am attempting to create a straightforward download link for a PDF file that users can upload and then have the option to download. I would like this download feature to appear either in a pop-up box or simply on the Chrome download bar. Despite trying v ...

javascriptphpjqueryhtmlpdf

After closing the box, make sure to hold it securely

After clicking the button and closing my box with jQuery (Toggle), I want the state of the box to be remembered after refreshing the page. If the box was closed, it should remain closed upon refresh, and if it was open, it should stay open. I am looking ...

javascriptjqueryhtmlcss

Problems with Wordpress AJAX search functionality

I am currently working on implementing a search feature using AJAX to dynamically load posts. However, I am facing an issue where the results are not being displayed. This code snippet was adapted from another source and modified based on private feedback ...

javascriptphphtmlajaxwordpress

Having trouble adjusting the height of <a> elements in the navbar

My navbar has an issue where the listed items do not fill the entire height of the navbar. I have tried adjusting padding and margin, but it doesn't seem to be affecting the layout. Any suggestions would be greatly appreciated. Thank you. #navbar { ...

htmlcss

Deleting the clone <div> while ensuring the main <div> is kept clear of any remaining data

Initially: https://i.sstatic.net/SLG7O.png After adding a new row and then removing it. https://i.sstatic.net/FegjK.png Why is this happening? When I set val(""), the textbox should have no value. What mistake did I make in my code? Please assist. Her ...

javascriptjqueryhtmlasp.netclone

Python script using Selenium to only print elements in an HTML page that have a specific class value and print only certain elements based on

I am currently developing a script to automatically test all the free proxies available on The website contains a comprehensive list of all available proxies, and I have successfully made my script extract and display them. However, I only want to display ...

pythonhtmlseleniumweb-scrapingproxy

XSLT selecting the remaining elements in a tokenized array

In my XSL document, I have a requirement to generate a hyperlink with text that includes a line break, resulting in two separate sentences. To achieve this, I am utilizing the tokenize function to split words based on whitespace character. <xsl:variab ...

htmlxmltemplatesxslttoken

Enhance Your File Uploads with Custom Images in Bootstrap

For the file upload buttons, I have used the given image by customizing the button look using Bootstrap 3. Here is an example of how I achieved this: <label class="btn btn-primary" for="my-file-selector"> <input id="my-file-selector" type="fi ...

htmlcsstwitter-bootstrap