Creating a circular shape with text layered on top that spans the full width using CSS

Question

Creating a circular shape with text layered on top that spans the full width using CSS

I'm currently attempting to replicate this specific layout: Website design

In this design, the red circle is quite wide and extends beyond the edge of the screen. I also plan to place text on top of it, which will serve as my website's logo.

My attempt at recreating it can be found here: https://jsfiddle.net/s0q8Ljr5/1/

#container {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
}

#nav-bg {
width: 90vw;
height: 90vw;
margin: 0 auto;
padding: 0;
margin-top: -45vw;
background: red;
border-radius: 50%;
position: absolute;
}

#title {
margin: 0 auto;
text-align: center;
position: absolute;
margin-top: 20px;
}

However, I am encountering some challenges with getting the circle to extend as far as I want while maintaining its centered position. Additionally, the text is not perfectly centered, and I am uncertain about the compatibility of using the "vw" property for width and height across different browsers.

Any assistance or suggestions would be greatly appreciated! Thank you.

html css

Answer 1

Answer №1

If you want to achieve this effect, consider using SVG or clip-path. There are various approaches to creating it, so take a look at this example:

body {
  margin: 0;
}

#container {
  background-color: red;
  height: 100px;
  padding-bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nextDiv {
  height: 100vh;
  position: relative;
}

.cutEffect {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateY(-90%);
  font-size: 0;
}

<div id="container">
  <div id="nav-bg"></div>
  <h1 id="title">Title goes here</h1>
</div>
<div class="nextDiv">
  <svg class="cutEffect" viewBox="0 0 100 20" fill="white">
    <path d="M 0 0 L 0 20 L 100 20 L 100 0 Q 50 30 0 0"></path>
  </svg>
</div>

Answer 2

If you want to achieve this effect, consider using SVG or clip-path. There are various approaches to creating it, so take a look at this example:

body {
  margin: 0;
}

#container {
  background-color: red;
  height: 100px;
  padding-bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nextDiv {
  height: 100vh;
  position: relative;
}

.cutEffect {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateY(-90%);
  font-size: 0;
}

<div id="container">
  <div id="nav-bg"></div>
  <h1 id="title">Title goes here</h1>
</div>
<div class="nextDiv">
  <svg class="cutEffect" viewBox="0 0 100 20" fill="white">
    <path d="M 0 0 L 0 20 L 100 20 L 100 0 Q 50 30 0 0"></path>
  </svg>
</div>

Answer 3

Answer №2

Your use of viewport properties is good, but it seems you have used the same values for both height and width. It would be better to differentiate between width(vw) and height(vh)

#container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

#nav-bg {
  width: 80vw;
  height: 80vh;
  margin: 0 auto;
  margin-top: -45vh;
  background: red;
  border-radius: 60%;
  position: relative;
}

#title {
  top: 65%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<div id="container">

  <div id="nav-bg"></div>
  <h1 id="title">Title goes here</h1>

</div>

You may want to consider this approach:

Answer 4

Your use of viewport properties is good, but it seems you have used the same values for both height and width. It would be better to differentiate between width(vw) and height(vh)

#container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

#nav-bg {
  width: 80vw;
  height: 80vh;
  margin: 0 auto;
  margin-top: -45vh;
  background: red;
  border-radius: 60%;
  position: relative;
}

#title {
  top: 65%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<div id="container">

  <div id="nav-bg"></div>
  <h1 id="title">Title goes here</h1>

</div>

You may want to consider this approach:

Creating a circular shape with text layered on top that spans the full width using CSS

Answer №1

Answer №2

Similar questions

The cursor in a contenteditable element fails to return to its original position after adding a new line and then deleting it

Changing the heading tag type dynamically using CSS

Eliminate JavaScript comments with Regex in PHP

Using jQuery to create a complex hierarchy of div elements

Reverse the impact of the preceding CSS directive

What is the best way to integrate a CSS file into Vue.js 2?

Animating the reordering of slides in Angular using ng-repeat

Tips for effectively managing Navbar color adjustment while scrolling in Angular?

Troubleshooting inconsistent htaccess changes across different pages?

Concealing the navigation bar on an ASP.NET webpage following user login

I'm experiencing challenges with the layout of an HTML document

Having trouble arranging the elements when swapping within a pop-up modal

Conceal Content from Onsite Search

Increase the value by one of the number enclosed in the <h3> element

What is the best way to align this rendered Django template in the center using Bootstrap?

Alter the input title in Vue by clicking on a list item

Show information when table is clicked

Limiting the Number of Categories in WordPress

The final item in the inline list vanishes when a new list is added

Adjusting the width of columns in a flex layout using Bootstrap 4