Designing CSS outlines to create shapes

I want to design a unique navigation for my website without using images, so I thought using shapes would be a cool idea.

Specifically, I am trying to create a crescent moon shape with a border.

My goal is to have a border around the red part of the crescent moon shape, with the rest of the circle surrounding it.

.bottom_line {
  position: absolute;
  height: 500px;
  width: 500px;
  border: 10px solid black;
  border-radius: 500px;
  box-shadow: 100px 100px 0px 0px red inset;
}

.top_line {
  position: absolute;
  top: 110px;
  left: 110px;
  height: 500px;
  width: 500px;
  border: 10px solid black;
  border-radius: 500px;
}
<div class="top_line"></div>
<div class="bottom_line"></div>

htmlcsscss-shapes

Answer №1

Through a series of experiments, I have finalized this design. Many thanks to cpshah for guiding me in this direction.

.circle {
  position: absolute;
  top: 15px;
  left: 15px;
  height: 500px;
  width: 500px;
  border: 10px solid transparent;
  border-radius: 500px;
  box-shadow: 100px 100px 0px 0px red inset;
}

.bottom_line {
  position: absolute;
  top: 110px;
  left: 110px;
  height: 500px;
  width: 500px;
  border: 10px solid transparent;
  border-radius: 500px;
  box-shadow: 20px 20px 0px -8px purple inset;
  z-index: 2;
}

.top_line {
  position: absolute;
  height: 510px;
  width: 510px;
  border: 10px solid transparent;
  border-radius: 510px;
  box-shadow: 15px 15px 0px 7px purple inset;
  z-index: 1;
}
<div class="circle"></div>
<div class="top_line"></div>
<div class="bottom_line"></div>

Answer №2

Upon reviewing the depiction of dropbox, it is clear that a circular shape is not desired for the inside arc. To achieve the desired effect, consider implementing the following CSS code for the top_line class:

.top_line {
  position: absolute;
  top: 110px;
  left: 110px;
  height: 430px;
  width: 430px;
  border-radius: 500px;
  z-index: 2;
  background-color: #FFF;
  box-shadow: 9px 10px 0px 0px black inset;
  border-bottom-left-radius: 300px;
  border-top-right-radius: 300px;
}
<div class="top_line"></div>

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

Styling a div element in CSS with absolute positioning and the ability to

I am looking to set specific positions and dimensions for the div elements within my HTML document. Refer to this image for reference: https://i.stack.imgur.com/ANBVm.png For each of these div elements, I want a vertical scrollbar to appear if the content ...

htmlcssscrollpositionabsolute

Laravel fails to generate log file for error incident

In my Laravel website, I have implemented a basic form for users to ask questions. However, when I tried submitting the form using Ajax, I encountered an error in the console: GET http://localhost/sencare_v2/ask-question-form-submit?first_name=shbshb&a ...

phphtmlajaxlaravellaravel-routing

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

Recently, I came across a fantastic plugin that works perfectly on regular computer browsers. However, when I tested it on my android phone, the css3 animation for the dropdown appeared choppy and seemed to be dropping frames. Does anyone have suggestions ...

javascriptcssplugins

Unable to get compatibility mode IE to work as intended

I am facing an issue where I need to showcase a webpage in compatibility mode. Despite using the code below: <meta http-equiv="X-UA-Compatible" content="IE=11"> It seems like this code only functions if compatibility mode is already enabled. In tha ...

htmlcssinternet-explorercompatibility

Steps for implementing remote modals in Bootstrap 5 using CS HTML

I'm attempting to implement a remote modal window in Bootstrap 5 with C# MVC. The endpoint for the modal partial view is configured correctly. According to this discussion on Github, all that needs to be done is to call some JavaScript. However, it ...

javascripthtmlbootstrap-5

Canvas in the off state has been removed

My goal is to create a basic JavaScript library that includes rotating, translating, and scaling the canvas. One issue I am facing is when I rotate the canvas, half of the content ends up getting deleted because the center of rotation is set at (0, 0). I ...

javascripthtmlcanvas

Element not found: {"method":"xpath","selector":"//*[@id='content container']

The error is occurring despite having the correct xpath in the code: Unable to locate element: {"method":"xpath","selector":"//*[@id='content column']... It seems like there might be multiple xpaths in the field. Here is the code snippet: dr ...

javahtmlxpathselenium-webdrivercss-selectors

What could be the reason for my MVC 5 ASP.Net application functioning perfectly on my local machine but encountering issues when deployed to Azure

Looking for some help with my first question here. I've recently completed a small ASP.Net project focused on racing drivers and teams, which works well locally but encounters issues when deployed to Azure. The first problem I've encountered is ...

cssazureasp.net-mvc-5web-configvisual-studio-2015

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

htmlcssborderpseudo-element

Initiate activity when link is clicked

I am currently in the process of developing a website that includes 5 divs. <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div ...

javascriptjqueryhtmlcss

Is there a way to include clickable links within my dropdown menu?

I'm having an issue trying to create a dropdown menu with links on my website, but it doesn't seem to be working. <!doctype html> <html> <head> <style> a.mainhrf ul.mainul { display: none; } a. ...

htmlcsslist

changing up the format of nested blockquotes

My website includes various text features, which means that nested blockquotes are a possibility. I am now curious if it is feasible to style nested blockquotes differently from each other! blockquote{ background-color:#666; color:#fff; border ...

javascriptjqueryhtmlcss

Positioning elements within a Bootstrap column: Fixed versus Absolute positioning

Striving to maintain the absolute positioning of the right column as users scroll through the left column has proven to be a challenging task. Despite exploring various solutions from stackoverflow and google, none seem to effectively address this issue. ...

htmlcsstwitter-bootstrapreactjs

implement a Django for loop within the template by utilizing JavaScript

Is it possible to incorporate a {% for in %} loop and {{ variables }} in a Django template using JavaScript DOM (insertAdjacentText, or textContent) and dynamically load data from the views without refreshing the entire page? If so, can you please guide me ...

javascriptpythonhtmldjangoajax

Get a webpage that generates a POST parameter through JavaScript and save it onto your device

After extensive research, I have hit a roadblock and desperately need help. My task involves downloading an HTML page by filling out a form with various data and submitting it to save the responses. Using Firebug, I can see that my data is sent over POST, ...

javascriptjqueryhtmlwget

Having issues with CSS animation keyframes not functioning properly in NextJS

Currently, I have a straightforward component in NextJS that is displaying "HI" upon loading. This component fades in when rendered, but I am facing an issue while trying to pass a prop to make it fade out. The problem lies in the fact that even though the ...

cssnext.jscss-animations

Step-by-step guide to automatically submitting a form after obtaining geolocation without the need for manual button-clicking

I am looking for a way to automatically call a page to get geolocation data, and then submit the form to my PHP page with the values of getlat and getlon without the need to click a submit button. I have tried implementing the code below, however, despit ...

javascriptphphtmlgeolocation

Apple's iPhone does not adhere to media query specifications

My responsive website was functioning perfectly on desktop, Android, and Windows Phone devices. However, when I asked my friends to check it on their iPhones running iOS 10, they informed me that the media queries were being ignored on iPhone models 5, 5s, ...

ioscssiphoneresponsive-designmedia-queries

Styling with CSS: Proper alignment of elements within a div container

I'm struggling with positioning three elements within a div. The left element needs to be on the left, the middle element centered, and the right element on the right. Here's what I have so far in my CSS: #left-element { margin-left: 9px; ...

csspositioninghtml

Instructions for capturing multi-dimensional arrays using forms in Vue

I have a snippet of code that looks like this: <div class="form-item"> <label for="list-0"><?php _e('List 0', 'test'); ?></label> <input name="list[0]" type="text" id="list-0" value=""> </div> &l ...

javascripthtmlformsvue.js