Shape with an unusual rounded base edge

Recently, I've been exploring how to create a rectangle with a rounded bottom side. However, my research only revealed how to achieve a rounded side, not rounded corners.

.figure {
  height: 400px;
  width: 200px;
  background-color: black;
  border-bottom-left-radius: 100%30px;
  border-bottom-right-radius: 100%30px;
}
<div class="figure"></div>

Despite following these instructions, I couldn't replicate the look of this image.

https://i.sstatic.net/BvUjb.jpg

Your assistance in achieving this design would be greatly appreciated. Thank you!

csscss-shapesrounded-corners

Answer №1

SVG:

The design was recreated using Adobe Illustrator (you can also use the free alternative: Inkscape) and was enhanced since it lacked symmetry, as shown in the comparison image below with the original image and the pink line:

https://i.sstatic.net/lDwmo.jpg

SVG may result in more lines of code, but it allows for the creation of intricate and unique shapes (especially beneficial in this case as it is a significant element within the page layout). 

body {
  margin: 0px;
  font-size: 1.4vw;
  font-family: arial, sans-serif;
  color: white;
  background: #f4f4f4;
}

#header {
  position: relative;
  height: auto;
  width: 100%;
  text-align: center;
}

svg {
  max-width: 100%; 
}

path {
  fill: #4f3b6a; 
}

span {
  color: white;
  position: absolute;
  left:0;
  right:0;
  margin: auto;
  bottom: 16%;
}
<div id=header>

<svg x="0px" y="0px" viewBox="0 0 1920 180">
<path d="M0,0c0,0,0.085,57.702,0.085,77.429c42.108,3.792,84.187,7.988,126.333,11.294c100.844,7.912,201.861,12.082,302.976,14.923
c132.122,3.715,258.477,4.525,390.619,2.69c3.054-0.043,4.721,1.115,6.438,3.565c10.835,15.457,22.122,30.6,32.771,46.182
c11.62,17,26.813,23.914,47.781,23.914c2.441,0,102.813,0,105.994,0c20.968,0,36.161-6.914,47.781-23.914
c10.647-15.582,21.937-30.725,32.771-46.182c1.719-2.451,3.386-3.609,6.438-3.566c132.145,1.835,258.497,1.021,390.618-2.689
c101.113-2.842,202.133-7.013,302.977-14.923c42.146-3.307,84.225-7.503,126.333-11.294C1919.915,57.702,1920,0,1920,0H0z"/>
</svg>
  
<span>DESTINOS</span>

</div>

Answer №2

body{margin:0; font:16px/1 sans-serif;}
.figure{
  position:      relative;
  background:    #4C3966;
  height:        40px;
  border-radius: 0 0 100% 100%;
}
.figure a{
  color:      #fff;
  background: inherit;
  position:   absolute;
  bottom:     0;
  left:       50%;
          transform: translate(-50%, 95%);
  -webkit-transform: translate(-50%, 95%);
  padding:    8px 11px;
  border-radius: 0 0 7px 7px;
}
.figure a:before,
.figure a:after{
  content:  " ";
  position: absolute;
  top:      0;
  width:    23px;
  height:   100%;
  background-color: inherit; 
}
.figure a:before{
  border-radius: 0 0 0 12px;
  transform:     skew(24deg);
  left:          -13px;
}
.figure a:after{
  border-radius: 0 0 12px 0 ;
  transform:     skew(-24deg);
  right:         -13px;
}
<div class="figure">
  <a>DESTINATIONS</a>
</div>

taken mainly from:

Answer №3

Check out this design: https://jsfiddle.net/stevenng/c6jxzL2m/2/

<div class="figure"></div>

.figure {
  position: relative;
  width: 100%;
  height: 90px;
}
.figure:before {
  background-color: purple;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-bottom-left-radius: 100%30px;
  border-bottom-right-radius: 100%30px; 
}
.figure:after {
  content: "";
  position: absolute;
  bottom:0;
  left: 50%;
  width: 60px;
  height: 30px;
  margin-left: -50px;
  border-top: 31px solid purple;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
  border-bottom-left-radius: 100%30px;
  border-bottom-right-radius: 100%30px; 
    height: 0;
}

Answer №4

It is currently recommended to utilize SVG rather than CSS for achieving rounded sides in website design.

Although it is feasible to round sides using CSS, the outcome may not align precisely with your vision.

.shape {
  height: 150px;
  width: 250px;
  margin: auto;
  background-color: blue;
  border-radius: 0 0 30px 30px / 0 0 100% 100%;
}
<div class="shape"></div>

Answer №5

After experimenting with different styles, I managed to create a design that closely resembles what I had in mind. Take a look at the code snippet below:

CSS

body { margin: 0; padding: 0; overflow-x: hidden; }
.full {
  width: 100%;
  height: 40px;
  background: purple; 
  position: relative; 
}

.full:before { content: ""; position: absolute; left: 0; right: 50%; margin-left: -150px; background: purple; bottom: -30px; height: 50px; border-bottom-left-radius: 50%30px; border-bottom-right-radius:50%30px;   transform: rotate(2deg); -webkit-transform: rotate(2deg); }
.full:after { content: ""; position: absolute; right: 0; left: 50%; margin-right: -150px; background: purple; bottom: -30px; height: 50px; border-bottom-left-radius: 50%30px; border-bottom-right-radius:50%30px;   transform: rotate(-2deg); -webkit-transform: rotate(-2deg); }

.figure {
    height: 50px;
    width: 100px;
    margin: auto; 
    background-color: purple;
    border-bottom-left-radius: 250%30px;
    border-bottom-right-radius: 250%30px;
    position : relative; 
    transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    margin-top:27px;
    text-align: center;
    line-height: 45px;
    color: #fff; text-transform: uppercase; font-family: arial; z-index: 10;
}

.figure:before {
  transform: rotate(45deg);
  -webkit-transform: rotate(50deg);
  background: purple;
  position: absolute;
  left: 2px; bottom: 0; top: -95px;
  content: "";
  width:65px;border-bottom-left-radius: 100%10px; border-bottom-right-radius:100%10px; z-index: -1
}

.figure:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-50deg);
  background: purple;
  position: absolute;
  right: 2px; bottom: 0; top: -105px;
  content: "";
  width:70px;border-bottom-left-radius: 100%10px; border-bottom-right-radius:100%10px;  z-index: -1
}

Check it out here

Answer №6

Just for the thrill of it, since mix-blend-mode doesn't work everywhere:

div {
  background: #4F3D6D;
  border: solid;
  mix-blend-mode: screen;
  color: white;
  padding: 1em;
  position: relative;
  margin-bottom: 3em;
  border-radius: 0 0 100% 100% /2em;
}
div h1 {
  border: solid;
  position: absolute;
  top: 99.5%;
  background: inherit;
  margin: 0;
  padding: 0 2em 0.5em;
  left: 0;
  right: 0;
  margin: auto;
  display: table;
  /* shrinks on content */
  border-radius: 0 0 180px 180px /0 0 200px 200px;
}
div h1:before,
div h1:after {
  content: '';
  padding: 0.5em;
  display: block;
  width: 70%;
  margin: -3px -2.1em -0.25em;
  background: inherit;
  border-left: solid;
  transform: skew(22deg)
}
div h1:after {
  position: absolute;
  top: 0;
  left: 30%;
  transform: skew(-22deg);
  margin: 0 0 0 -1.06em;
  border-left: none;
  border-right: solid;
}
html {
  background: url(http://lorempixel.com/500/800/abstract/1) top center;
}
<div>
  <h1>Destiny</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>

</div>

Explore Pen

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

Arranging two spans to appear in a vertical column beside a thumbnail

My goal is to create a layout with a thumbnail, two pieces of information stacked underneath, and options floating to the right. I have attempted to achieve this using the following HTML and CSS: span.author_name { font-size: 14px; vertical-align: t ...

htmlcssposition

I am struggling to align elements properly with Bootstrap, and I am encountering issues with the border radius of a specific div

I'm having trouble aligning all the elements in the center of my login form created with HTML and Bootstrap. The header appears to be center-aligned, but it is not vertically aligned with the other elements. I've been using the Grid system and ne ...

htmlcsstwitter-bootstrap

Issues arising when checking the responsiveness of the navigation bar on display

Recently, I encountered an issue with the navigation bar on my webpage. It contains an image logo on the left and three links on the right. The problem arises when I test the responsiveness using different devices on Chrome; the navigation bar resizes and ...

htmlcssresponsive-design

Is the JavaScript progress bar dysfunctional when used with object-oriented JavaScript code, but functions properly with arrow functions?

After posting a question about the JavaScript progress bar not working with object-oriented JavaScript code on Stack Overflow, I decided to try rewriting the script using arrow functions. Here is the new code: document.getElementById("barButton").addEve ...

javascripthtmlcssoop

Tips on positioning divs in a vertical layout with CSS

I have a question about CSS. I have a simple footer with col-md-8 and col-md-4 classes. How can I arrange the col-md-8 above the col-md-4 at the media breakpoint of 720px (max)? I am new to CSS and would appreciate your help with this. Please run the snipp ...

htmlcssbootstrap-4footer

How to center align a Bootstrap 4 Navbar using CSS

Having trouble center-aligning your Bootstrap 4 navbar in your Angular code base? You're not alone. I too wanted to reduce the gaps between menu items when transitioning from one to another. Below you'll find snippets of my HTML, TS, and CSS: M ...

htmlcssangularbootstrap-4navbar

The adjustment in margin triggers a ripple effect on several div elements

My goal is to make my logo image move up on hover without affecting the text below it. However, I'm facing an issue where both elements are triggered simultaneously even though they are in different divs wrapped in a parent div. It seems like there mi ...

jqueryhtmlcssmargin

Challenges with Aligning Panels in Column 6

My initial encounter with bootstrap was interesting. I attempted to have two panels placed side by side using the col-lg-6 class. The left panel was meant to be a link to an article, along with an image, while the right panel would serve as a signup/login ...

htmlcssbootstrap-4

Assigning the CSS class "active" to the navigation menu in ASP Classic

Seeking assistance with setting a CSS class for the current page in an include file that contains the primary navigation menu. Here is my current progress: public function GetFileName() Dim files, url, segments, current 'obtain c ...

cssasp-classicmenuswitch-statement

Show the image on top of the div block as the AJAX content loads

Implementing this task may seem easy and common, but I am struggling to figure it out! What should take five minutes has turned into an hour of frustration. Please lend me your expertise in getting this done. I have a div container block: <div cla ...

javascriptjqueryhtmlcssajax

Shifting of SVG coordinates

My challenge involves fitting an svg into a div. The svg consists of a single path. Even though I have correctly set up the viewBox and preserveAspectRatio, part of the path is drawn outside the expected boundaries. You can find the fiddle here, and below ...

htmlcsssvgpathpadding

When viewed on mobile devices, the image shrinks significantly

I'm experiencing an issue where the image shrinks significantly when viewed on a mobile device or when zooming in the browser. Can you help me understand why this is happening and suggest a solution? Here are the HTML and CSS code snippets: HTML < ...

htmlcss

Setting the display property to inline will default to the original height and

Take a look at the example I created on http://jsfiddle.net/GKnkW/2/ Here's the HTML code: <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <div class="step">1</div>&am ...

css

Using dynamic jquery to target specific elements. How can we apply jquery to selected elements only?

Hello everyone! I have been working on a simple hover color change effect using jQuery, but I noticed that I am repeating the code for different buttons and service icons. Is there a way to achieve the same result so that when a button is hovered, the co ...

javascripthtmljquerycsshover

Ways to interact with a button that toggles between states

I am working with a button that has both an enabled and disabled state. Enabled State: <button type="button" class="btt-download-csv site-toolbar-menu-button icon-download no-icon-margins ng-isolate-scope" title="Download CSV" rc-download-csv="" curren ...

pythoncssselenium

Modifying my code: utilizing toggle() and toggleClass() at the moment

Confusion in Code Communication The following IDs lack proper communication: #html-button #css-button #js-button #result-button To address this, I introduced a new class called .selected. The code functions well with the current setup. However, removin ...

javascriptjqueryhtmlcss

The web application located on the server is having trouble recognizing and loading the stylesheet

After deploying the web app on MS Server 2008 R2, I noticed that it is not reading the style sheets on any of the pages. The masterpage only contains a ToolkitScriptManager with no styles. However, the source code shows the style links and accessing them d ...

asp.net.netcsswindows-server-2008-r2

Header rows in the table remain in place, however, the borders shift when viewed on Chrome and do not display at all on Firefox

I'm having trouble with the borders on my header table. In Chrome, the top border disappears when I scroll down, and in Firefox, it simply doesn't appear. You can see the issue here https://codepen.io/anon/pen/zyEwZq#anon-login Check it out on ...

htmlcss

JavaScript application that features an audio player complete with a dynamic progress bar and customizable tags

Looking to create a custom audio player using HTML, CSS, and JS. The player should have basic functionality like a play button and progress bar. However, I want to allow users to add tags on the progress bar of the audio file, similar to how SoundCloud&apo ...

javascripthtmlcss

What method can be used to dynamically resize two side-by-side iframes in proportion to a specific ratio?

Hey, I've got this code snippet: So there are two iframes positioned side by side with a specific ratio as indicated in the link provided. My aim is to maintain that ratio regardless of the screen size where it's viewed. The first iframe is named ...

htmlcssiframe