Can a CSS border-radius be used to create a quadrilateral circle?

Struggling with creating a HUD for my server, I've hit a roadblock. CSS isn't my forte but I have some knowledge about it.

I'm aiming to design a circular element like this Check it out here

.circle {
    position: relative;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-width: 22px;
    border-style: solid;
    border-color: #4a4a4c #4a4a4c00 #4a4a4c #4a4a4c;
    transform: rotate(25deg);
  }

  
  .wide {
    width: 200px;
    height: 200px;
  }
<div class="circle wide"></div>

I tried implementing the code above but couldn't quite nail it.

htmlcss

Answer №1

Key Points

  • Using position: absolute; and transform: translate to reposition elements

  • outline-offset creates the orange line in the design

  • The icons utilized are Unicode characters from this source

  • The panel structure consists of a <form> along with two <button>s and a <meter>

The design lacks SVG or image assets due to complexities involved.

.circle {
  position: relative;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-width: 22px;
  border-style: solid;
  border-color: #4a4a4c #4a4a4c00 #4a4a4c #4a4a4c;
  outline: solid 6px orange;
  outline-offset: -14px;
  transform: rotate(0deg);
}

.wide {
  width: 200px;
  height: 200px;
}

.panel {
  display: inline-block;
  position: absolute;
  top: -8px;
  right: -8px;
  width: 7rem;
  padding: 0 6px 6px 6px;
  border-radius: 12px;
  transform: rotate(90deg) translateY(-240%);
  transform-origin: left center;
  background: #333;
}

.panel b {
  display: inline-block;
  transform: rotate(-90deg);
  margin-right: 8px;
}

button {
  width: 30%;
  padding: 0;
  border: 0.5px;
  border-radius: 4px;
  background: rgba(51,51,51,0.3);
  cursor: pointer;
}

button:hover {
  background: gold;
}

.power {
  width: 70%;
  transform: rotate(-180deg);
}

.view {
  position: absolute;
  top: 6px;
  left: 18px;
  font-family: 'Segoe UI';
  font-size: 5.5rem;
  color: #aaa;
 }
<div class="circle wide">
  <output class='view'>85</output>
  <form class='panel'>
    <label><b>⛽</b><meter class='power' value="6" min="0" max="10"></meter></label><br>
    <button class='btn' type='button'>🔆</button>
    <button class='btn' type='reset'>🔁</button>
    <button class='btn' type='submit'>🛰️</button>
  </form>
</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

IE z-index bug affecting Youtube videos

I've been experimenting with the YouTube API and I've included the following code snippet in http://jsfiddle.net/aaronk85/wapFR/. <div id="video-wrap2"></div> <div id="video-wrap"> <div id="play-video"></div> &l ...

jquerycssiframeyoutube-apiz-index

How to Customize Checkboxes with CSS

I'm attempting to customize the style of a checkbox on a form, and here is what my HTML currently looks like: <form id="feedback"> <input type="checkbox" id="option1" /> <label for="option1">Option</label> </form> H ...

htmlcsscheckbox

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

htmlcssemail

Show the precise selection from one dropdown menu based on the chosen value in another dropdown menu

How can I retrieve the scheduleID value from a specific MovieID value within a comboBox? Movie Selection Box: <?php $query = "select * from ref_movies ORDER BY MovieID"; $result = mysql_query($query) or die (mysql_error()); echo '<s ...

phphtmlmysql

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

javascriptangularcssionic2angular-animations

Creating anchor links with #id that function correctly in an Angular project can sometimes be challenging

My backend markdown compiler generates the HTML content, and I need Angular to retrieve data from the server, dynamically render the content, and display it. An example of the mock markdown content is: <h1 id="test1">Test 1<a href="#test1" title ...

javascripthtmlangulartypescriptanchor

How can the presence of a CSS rule prevent another from being applied?

My attempt to create this HTML file in Chrome posed some challenges: <style> br { }​ [required] { border-width: 3px; border-color: red; } </style> <input required /> The entire content of the file is shown above. However, I noti ...

htmlcssgoogle-chrome

Unable to determine the reason why the JavaScript plugin is not functioning as expected

I have been attempting to set up a JS modal window and have essentially copied the code for the plugin exactly as instructed, but it is not functioning properly. Here is my code... <!doctype html> <html> <head> <meta charset="utf- ...

javascriptjqueryhtml

Create a stylish layout with two div elements positioned side by side using flexbox for a responsive design

Struggling with my portfolio website, I encountered a challenge. I attempted to place two divs side by side, each containing text and an image. While the initial setup was simple, trying to make it responsive using flexbox has proven to be quite frustratin ...

htmlcssflexboxresponsiveportfolio

The tab content appears to be hidden or not displaying properly

I'm currently working on a project involving tabs that display content for two different data-targets (which is not an issue). I've implemented a script that automatically switches tabs every 5 seconds. The tab changes successfully, but the tab-c ...

jqueryhtmlcsstwitter-bootstrap

Tips for adding jQuery UI styling to elements generated dynamically

I have a challenge with generating text fields using jquery while applying jquery ui styling to the form. The issue is that the dynamically created elements do not inherit the css styles from jquery ui: let index = 0; $('#btn_generate').on(& ...

jquerycssjquery-ui

I want to use flexbox to center three divs on my webpage

I am trying to align 3 divs inside a flex container in the center of the page with equal distance between them and also from the edge of the page. .container { display : flex; width : 60%; } .para { width : 33%; padding : 1em; borde ...

htmlcssflexbox

How can we briefly make the list item color and size return to default after clicking the Bootstrap navbar-toggler button?

.navbar .collapse .navbar-nav .nav-item .nav-link { font-family: 'yekan'; color: #fff; opacity: .8; font-size: .9rem; padding-left: 15px; padding-right: 15px } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery. ...

htmlcssbootstrap-4

Issue with utilizing addEventListener("load") in Firefox in conjunction with <iframe>

I've encountered an issue with my iframe when it is used as the target for a form. In all major browsers, except for Firefox, the iframe successfully removes the main element upon pressing the submit button. However, in Firefox, the main element is re ...

javascripthtmlfirefoxiframeecmascript-6

Using jQuery to iterate over a multi-dimensional array and showing the child elements for each parent array

I am facing an issue with a multidimensional array that contains objects and other arrays. While it is simple to loop through the parent array and display its contents in HTML, I encounter a problem when there are multiple layers of arrays nested within ea ...

javascripthtmljqueryarraysmultidimensional-array

Implementing Google Apps Script code on my webpages

I am currently in the process of developing a web application using HTML, CSS, and JavaScript with Google Spreadsheet serving as my database. To turn this web app into a fully functional application, I am considering utilizing PhoneGap. After successfully ...

javascripthtmlgoogle-apps-scriptgoogle-api

What is the optimal unit to employ in CSS - percentages or pixels?

As someone who is not well-versed in CSS, I strive to create a design that will appear visually appealing across all browsers and screen resolutions. I have observed that certain websites construct their designs using percentages for properties like width, ...

cssresolution

Enhancing the appearance of text with CSS font borders

I'm currently working on a webpage that features various shades of red, green, yellow, and black in the background. I want to add font borders to the text displayed on this page, but using a single color just won't cut it. Check out the code here ...

htmlcssfontsborder

What is the best way to position a button directly to the right of a text box with no space in

Is there a way to perfectly align a submit button to the right of a text or search box, matching the height of the search box, and eliminating any unwanted white space between them? This is my current setup: <input type="text" value="" placehold ...

htmlcsslayout

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

My current project involves working with Electron, and it consists of three essential files. The first file is index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="styles ...

javascripthtmlcsselectron