How to Create an Inset Curved Background That Works with a Background Gradient and Overlapping Transparent Shapes

How can I create an inset curved background that works with a background gradient and overlapping transparent shapes?

Here is how I would attempt it. It will probably take a bit of finessing to make it work for your site, but hopefully you can see the technique I used.

Basically you are using divs as the background to content and translating them to overlay. Then putting any content in a container that you can change the z-index on to bring above everything else. The curve itself is just a border-radius of 50% and skewed wider than tall. Then the content's parent div has the gradient color background.

I do like the simplicity of Temani's solution though.

/* top ellipse */

.top {

  border-radius: 50%;

  width: 150%;

  height: 200px;

  transform: translate(-15%, 20%);

  background: white;

}

/* content's parent container */

.mid {

  padding: 4rem;

  background: linear-gradient(-20deg, #3adecf, #3ae3c5);

}

.content {

  position: relative;

  z-index: 20;

  color: white;

  font-size: 30px;

}

/* bottom ellipse */

.bottom {

  border-radius: 50%;

  width: 200%;

  height: 200px;

  transform: translate(-25%, -20%);

  background: white;

}

.all {

  overflow-y: hidden;

  position: relative;

}

.t-circle {

  background: #00ccdd;

  position: absolute;

  top: 5%;

  right: -200px;

  z-index: 10;

  width: 400px;

  height: 400px;

  border-radius: 50%;

  opacity: 0.2;

  pointer-events: none;

}

<div class="all">

  <div class="top">Top</div>

  <div class="mid">

    <div class="content">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien mauris, efficitur in nisi vel, gravida mollis urna. Praesent ac sem vitae neque pretium ultricies. Vestibulum id mattis neque. Nullam ultricies neque eget metus volutpat, et tempus magna commodo. Phasellus accumsan lacus nibh, at commodo elit pellentesque at. Morbi iaculis bibendum massa, sit amet accumsan felis ullamcorper a. Praesent luctus odio vel tortor finibus feugiat. Sed luctus finibus nisl, in pellentesque orci efficitur ut. Curabitur suscipit elementum aliquam. Sed vel convallis urna.

      <br><br>

        Phasellus porttitor blandit ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam elementum rhoncus diam ac rhoncus. Nunc sed lorem porttitor, placerat sem vitae, bibendum nunc. Ut dolor mi, condimentum vitae leo in, suscipit maximus risus. Morbi consequat dui eros, sit amet dapibus urna porta tempor. Fusce mollis a velit nec auctor. Donec semper elementum feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vel turpis pellentesque, ultricies metus blandit, interdum nibh. Duis malesuada dolor lacus, quis tempor erat elementum in. Pellentesque at consequat nisl. Vestibulum vel urna nec ipsum interdum pellentesque id nec magna. Mauris eu lectus posuere, aliquet justo id, pharetra nisl. 

      </div>

    </div>

  <div class="bottom">bottom</div>

  <div class="t-circle"></div>

</div>

How do I make top and bottom of a section curved inwards instead of outwards using html and css with an image in as the background?

You can use the same path and rotate it by 180 degrees, then absolutely position it on the bottom of the section. To make sure the elements heights fits I had to add an explicit heights on the section element.

section {
    margin: 60px 0;
    height: 400px;
    position: relative;
}
#statistics {
  background: url(https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2015/01/blend-mode-example-screenshot.png);
  background-size: cover; 
  background-attachment: fixed;
  background-position: center;
}
#bigHalfCircleCandyBottom {
  transform: rotate(180deg);
  position: absolute;
  bottom: 0;
  left: 0;
}

<section id="statistics" data-dir="up" class="statistics-section text-white parallax">
        
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>

<svg id="bigHalfCircleCandyBottom" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
</section>

How to shape a div corner in css

You can hack using multiple elements like this:

.d1 {

  width: 100px;

  height: 100px;

  background-color: #00f;

}

.wrapper {

  width: 100px;

  height: 20px;

  background-color: #fff;

  margin-top: -20px;

}

.d2 {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background-color: #00f;

}

.wrapper2 {

  width: 100px;

  height: 10px;

  background-color: #00f;

  margin-top: -20px;

  position: absolute;

}

<div class="d1"></div>

<div class="wrapper">

  <div class="d2"></div>

</div>

<div class="wrapper2"></div>

Inverse oval in CSS

You can try something with pseudo-elements like :before . Other solution would be with SVG but i made an answer just with a :before element.

Add it to the inverseoval div and shape it and position it how you want.

Be careful to give it the same background-color as for the content.

.content {

  height: 200px;

  background: black;

  padding-bottom: 50px;

}

.inverseoval {

  height: 100px;

  background: red;

  position: relative;

  overflow: hidden;

}

.inverseoval:before {

  position: absolute;

  top: -20px;

  left: 0;

  content: "";

  height: 80px;

  width: 100%;

  transform: rotate(-2deg);

  background-color: black;

  border-bottom-left-radius: 100%;

  border-bottom-right-radius: 100%;

}

<div class="content">

</div>

<div class="inverseoval"></div>

div with gradient background and rounded corners

More or less your requested result, but created with a shadow

You can play with the shadow parameters to fine adjust it.

#test {

    height: 40px;

    width: 140px;

  border-radius: 20px;

  background-color: #cf0;

  box-shadow: inset 0px 0px 14px 10px #080;

}

#pill {

    font-size: 12px;

    height: 40px;

    width: 100px;

    margin: 0 20px 0 20px;

    background: transparent;

    background-image: linear-gradient(#080, #cf0 45%, #cf0 55%, #080);

    z-index: 1;

    text-align: center;

}

#pill::before {

    display: block;

    content: '';

    width: 40px;

    height: 40px;

    position: absolute;

    margin-left: -20px;

    z-index: -1;

    border-radius: 40px;

    background-image: radial-gradient(circle 21px, #cf0 5%, #080);

}

#pill::after {

    display: inline-block;

    content: '';

    width: 40px;

    height: 40px;

    position: relative;

    right: -50px;

    z-index: -1;

    border-radius: 40px;

    background-image: radial-gradient(circle 21px, #cf0 5%, #080);

}

<div id=pill></div>

<div id=test></div>

Possible to use border-radius together with a border-image which has a gradient?

Probably not possible, as per the W3C spec:

A box's backgrounds, but not its
border-image, are clipped to the
appropriate curve (as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also, the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.

This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you'll need to create one yourself.

Clip path inset circle?

I don't think you can achieve this with clip-path but you can certainly cut a hole in a div using the radial-gradient background images. This has much better browser support than clip-path too.

Note: This approach (and box-shadow ) will work only when the element that is covering the content below has a colored fill. If instead of sandybrown color, there needs to be another image on top then these approaches will not work because they don't actually cut a hole, they just mimic that effect.

.div-with-hole {

  height: 100vh;

  background: radial-gradient(circle at center, transparent 25%, sandybrown 25.5%);

  background-size: 100% 100%;

  background-position: 50% 50%;

  transition: all 2s ease;

}

.div-with-hole:hover {

  background-size: 400% 400%; /* should be 100% * (100 / transparent % of radial gradient */

}

body {

  background: url(http://lorempixel.com/800/800/nature/1);

  min-height: 100vh;

  margin: 0;

  padding: 0;

}

<div class='div-with-hole'></div>

Creating a triangle in css with a gradient background

Creating triangles (or other shapes - pentagons, hexagons, octagons, decagons, dodecagons, tetradecagons, octadecagons and so on) with a gradient (or any other kind of image background) is really easy with CSS transforms.

But in this case you don't even need a triangle. You just need to rotate a square pseudo-element by 45deg and apply the gradient on that from corner to corner.

demo

<div class='warn'></div>

CSS:

.warn {
  position: relative;
  margin: 0 auto;
  border: solid 1px darkred;
  width: 12em; height: 3em;
  border-radius: .2em;
  background: linear-gradient(lightcoral, firebrick);
}
.warn:before {
  position: absolute;
  top: 50%; left: 0;
  margin: -.35em -.45em;
  border-left: inherit; border-bottom: inherit;
  /* pick width & height such that 
     the diagonal of the square is 1em = 1/3 the height of the warn bubble */
  width: .7em; height: .7em;
  border-radius: 0 0 0 .2em;
  transform: rotate(45deg);
  background: linear-gradient(-45deg, firebrick -100%, lightcoral 200%);
  content: '';
}

---

Related Topics