CODEWITHSUNDEEP
htmlcsssvg
chrizzy09
chrizzy09

Reputation: 67

CSS clip on an image with a rounded path

I am trying to do use a "clip path" on an image with a rounded path. I know there is a possibility to use svg clip paths, but I thought its not possible making it really responsive - so I decided to use the svg graphic on the div underneath the image - but I still have problems with mobile views, because only the left side of the svg is shown.

enter image description here

Can you please help me to find a better solution for this? I'm open for every solution, even it may be a totally different (and maybe better) approach. I made a fiddle to play around and to understand the problem, if you drag the preview window to a mobile view you'll see what I mean:

https://jsfiddle.net/Lrtgr858/16/

html,
body {
  background-color: #F7F7F7;
  padding: 0;
  overflow-x: hidden;
}

.svg-image-clip {
  overflow: hidden;
  top: -90px;
  position: relative;
  display: block;
  width: 120%;
  height: auto;
  content: '';
  background-image: url(https://svgshare.com/i/5r3.svg);
  background-size: cover;
  height: 200px;
  left: 60%;
  transform: translateX(-60%);
  -webkit-transform: translateX(-60%);
  -moz-transform: translateX(-60%);
}

.fullsize-image-div {
  width: 100%;
  height: 300px;
  background-image: url(http://fs1.directupload.net/images/180315/vlz5bgwm.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullsize-image-div h1 {
  color: white;
  font-size: 3rem;
}
<div class="fullsize-image-div">
  <h1 style="text-align:center">Hello, this is a test.</h1>
</div>
<div class="svg-image-clip"></div>

Upvotes: 4

Views: 3453

Answers (2)

Anzil khaN
Anzil khaN

Reputation: 1984

You can achieve this using clip-path.

There is no need svg-image-clip this element. Remove this from your code.

Add clip-path: ellipse(75% 100% at 50% 0%); to .fullsize-image-div.

Here is the working code

html,
body {
  background-color: #F7F7F7;
  padding: 0;
  overflow-x: hidden;
}


.fullsize-image-div {
  width: 100%;
  height: 300px;
  background-image: url(http://fs1.directupload.net/images/180315/vlz5bgwm.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: ellipse(85% 100% at 50% 0%);
}

.fullsize-image-div h1 {
  color: white;
  font-size: 3rem;
}
<div class="fullsize-image-div">
  <h1 style="text-align:center">Hello, this is a test.</h1>
</div>

Upvotes: 6

Riskbreaker
Riskbreaker

Reputation: 4791

You have many options and there is no need for you to do an svg element, I'll provide 2.

1. You can use a pseudo element where you can have a border radius on the bottom sides only and give the border some white color... the reason I bring this first one up is it will work everywhere:

Example:

.fullsize-image-div:before {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    margin-left: -900px;
    height: 1000px;
    width: 1600px;
    border-radius: 100%;
    border: 100px solid #fff;
}

I use your fiddle to just change some things. The sizing is just me duping it but you can edit it as you please:

FIDDLE

2. If you want modern CSS3 clip-path: This can easily be done with ellipse():

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

I also added some vw for sizing/font so it can be more fluid when responsive but please note this will not work in IE(clip-path)...again you can edit as you please:

Codepen

p.s. I like using codepen :)

Upvotes: 0

Related Questions