How to Ellipse a Clipping Mask on the Bottom Only

Can I ellipse a clipping mask on the bottom only?

Attempt 6: transparent :before with mega-border + overflow

Issue: has fixed size but works so long as larger than site width/image height! Feels dirty though...

Note: whilst the curves do not look equal, they are all accurate chunks of the same curvature/angle.

div { position: relative; display: inline-block; overflow: hidden; }

img { max-width: 100%; vertical-align: top; }

div:before { 

  content: ""; 

  position: absolute; 

  bottom: -100px; 

  left: 50%; 

  margin-left: -900px;

  height: 1000px;

  width: 1600px;

  border-radius: 100%; 

  border: 100px solid #fff;

}

<div><img src="http://placehold.it/320x120" /></div>

<div><img src="http://placehold.it/480x240" /></div>

<div><img src="http://placehold.it/100x220" /></div>

How to make a clipped half circle (D shape) using CSS?

Per my comment, instead of using clip path to create your D (which is not supported very well), why not use border radius on your div.

* {

  box-sizing: border-box;

}

.page-banner {

  position: relative;

  background: url(https://www.fillmurray.com/300/900) center center no-repeat;

  background-size: cover;

  width: 100%;

  overflow: hidden;         /* hide overflowing bits of circle */

  min-height: 300px;        /* just give enough height to fit text at smallest screen width size */

}

.circle {

  background-color: rgba(50, 108, 116, 0.9);   /* use rgba for transparent effect */

  color: white;

  transform: translate(-50%, -50%);            /* move the circle left 50% of it's own width and up 50% of it's own height */

  border-radius: 50%;

  padding-top: 100%;                           /* this gives us a responsive square */

  position: absolute;

  top:50%;                                     /* this vertically centers the circle */

  left:0;

  width:100%;

  min-width:600px;                              /* this is the miniimum dimensions to allow circle to fill smaller screens */

  min-height:600px;

}

.page-banner-text {

  position: absolute;                           /* just positions the text on the right of the cirecle */

  left: 50%;

  top: 50%;

  transform: translateY(-50%);

  padding:2em;

  width:40%;

}

<div class="page-banner">

  <div class="circle">

    <div class="page-banner-text">

      <h1 class="block-title">Programs For Adults</h1>

      <p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>

      <div id="banner-donate-button"><a href="#" class="" target="_self" title="Donate">DONATE</a></div>

    </div>

  </div>

</div>

Create a Reverse Clip-Path - CSS or SVG

You can put the image above the blue part and you apply the clip-path on it then the result will be the same as if you have created a hole inside the blue part to see the image below:

body {

  width: 100%; 

  height: 100vh;

  padding: 0; margin: 0;

  display: flex;

  }

#box {

  margin: auto;

  position: relative;

  width: 33%;

  height: 200px;

  background: blue;

}

#innerbox {

  width: 100%;

  height: 100%;

  background: url(https://lorempixel.com/400/400/) center/cover;

  top: 0;

  left: 0;

  position: absolute;

  z-index:1;

  clip-path:polygon(10% 10%, 10% 90%, 90% 50%);

}

<div id="box">

  <div id="innerbox"></div>

</div>

CSS: How to fit an image in a circle where bottom is clipped but top pops out?

Two SPAN elements.

The parent one is round with a border,

and the inner one has only rounded the bottom edge. Than playing with margin and the background properties...

.circle-face{

  display: inline-block;

  border: 4px solid #00B9D1;

  border-radius: 50%;

  width: 140px; 

  height: 140px;

  margin-top: 30px;                /* 30px forehead space */

}

.circle-face > *{

  display: inline-block;

  width: 140px;

  height: 170px;                   /* by 30px higher */

  margin-top: -30px;               /* and offset by 30px */

  background: none no-repeat center bottom / 170px;

  border-radius: 0 0 70px 70px;    /* 70 + 70 = 140px width */

  /* box-shadow: 0 0 0 4px red;    /* UNCOMMENT TO SEE THE TRICK */

}

<span class="circle-face">

  <span style="background-image:url(https://i.stack.imgur.com/bdZeE.png);"></span>

<span>

Masking - Show div only on top of certain div?

You can simplify your code like below and rely on a clip-path animation:

.eyes {

  padding:20px;

  background: lightblue;

  display: inline-flex;

}

.eyes span{

  width: 80px;

  height: 80px;

  background:grey;

  border-radius:50%;

  margin:10px;

  position:relative;

}

.eyes span:before {

  content:"";

  position:absolute;

  top:0;

  left:0;

  right:0;

  bottom:0;

  background:radial-gradient(black 7px, white 8px);

  animation:blink 0.8s linear infinite alternate;

}

@keyframes blink {

  from {

    clip-path: ellipse(50% 50% at 50% 50%);  

  }

  to {

    clip-path: ellipse(50%  0% at 50% 50%);

  }

}

<div class="eyes">

  <span></span>

  <span></span>

</div>

How to add border in my clip-path: polygon(); CSS style

Can border be applied to a clipped element along the clip path?

No, adding border property to the clipped element would not apply the borders along the clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out. You can see this in the below snippet:

div {
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 3px solid;
  background: darkseagreen;
}
div + div {
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
  clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
}

<div></div>
<div></div>

How to mask out a section of a div to see behind it?

Here's what I came up with this afternoon using:

background: radial-gradient(ellipse 200px 200px at 50% -25px, transparent 50px, green 0);

Looks like it works on all current browser versions too (I've only tested chrome and safari).

jsfiddle

CSS, Clip inner circle to image

This is how I would do it: I would use an SVG element. The clipPath have clipPathUnits="objectBoundingBox" and the path have all it's values between 0 and 1.

svg{position:absolute}

.section-test {

  padding: 25px 0;

  background-image: url(https://res.cloudinary.com/ddioeulgw/image/upload/v1548437500/test/hero.png);

  background-size: cover;

  height: 85vh;

  clip-path: url(#clip); 

  }

<svg height="0" width="0" >

    <defs>

         <clipPath id="clip" clipPathUnits="objectBoundingBox">

           <path d="M0,0 L0,.5 A1,1 0 0  1 1,.5 L1,0 0,0" />

        </clipPath>

    </defs>

</svg>

 

<section class="section-test">

</section>

---

Related Topics