The impact of a water droplet image on the reaction

Hello everyone, I am seeking assistance regarding CSS as the chatroom dedicated to CSS is currently empty. I am attempting to create a water drop effect but haven't had much success so far. Could someone guide me in the right direction? I have tried using SVG shape elements and Clip Path (Mask) CSS, but I couldn't achieve the desired effect on an image. Every time I apply the CSS, the image seems to rotate: https://ibb.co/J3sVQyn

Below is the CSS and React code snippet I am currently using:

.CardComponent-media-4 {
    width: 145px;
    height: 169px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    flex-basis: 20%;
    z-index: 50;  
    border-radius: 50%; 
    border-top: 145/2 ;
    border-left: 145/2;
    border-bottom: 145/2;
    border-left: 145/2;
    border-top-right-radius: 0;
    transform: rotate(45deg);
}
<CardMedia image={imageUrl} title={title} className={classes.media} />

cssreact-nativematerial-ui

Answer №1

You're getting there, just switch up the rotation of the image by incorporating a different element:

.box {
  width:150px;
  height:150px;  
  position:relative;
  border-radius:50% 0 50% 50%;   
  margin:50px;   
  transform:rotate(-45deg);   
  overflow:hidden; 
}  
.box:before {   
  content:"";   
  position:absolute;   
  top:-20%;   
  left:-20%;   
  right:-20%;   
  bottom:-20%;   
  background:center/cover;   
  background-image:inherit;   
  transform:rotate(45deg); 
}
  
<div class="box" style="background-image:url(https://i.picsum.photos/id/1074/800/800.jpg)"></div>
 

Here's another concept using a mask:

img {
  width:175px;   
  height:200px;   
  -webkit-mask:
    linear-gradient(to bottom right,transparent 48%,#fff 50%) 17% 0%/40% 40%,   
    linear-gradient(to bottom left ,transparent 48%,#fff 50%) 83% 0%/40% 40%,   
    radial-gradient(circle farthest-side at 50% 31%,#fff 90%,transparent 91%) bottom/100% 60%;   
  -webkit-mask-repeat:no-repeat;   
  mask:
    linear-gradient(to bottom right,transparent 48%,#fff 50%) 17% 0%/40% 40%,   
    linear-gradient(to bottom left ,transparent 48%,#fff 50%) 83% 0%/40% 40%,   
    radial-gradient(circle farthest-side at 50% 31%,#fff 90%,transparent 91%) bottom/100% 60%;   
  mask-repeat:no-repeat; 
}
  
<img src="https://i.picsum.photos/id/1074/800/914.jpg" >
 

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

Changing the appearance of your website on various pages using WordPress: activating unique stylesheets

When connecting my stylesheets to my WordPress theme, I include the following in my customtheme/style.css file: @import url('bootstrap/bootstrap.min.css'); @import url('includes/styles1.css'); @import url('includes/styles2.css&ap ...

csswordpress

What is the best way to send the value of a Select component from a child to a parent component in

Users have the ability to select a category, triggering the appearance of another dropdown menu based on their selection. I have created a separate component in a different file (.js) to handle this second dropdown. While I can see the data, I am wondering ...

javascriptreactjsdrop-down-menumaterial-ui

The collision between the Textfield Label and Value is being caused by Chrome's Autofill feature

When using React, I noticed that Autocomplete Chrome values don't trigger the onChange event right away. This leads to an issue where there is a collision between the MUI TextField Label and the actual values during the initial page load. How can I go ...

htmlcssreactjsgoogle-chromematerial-ui

Will inserting a * in a CSS file affect the styling in Internet Explorer?

I've been tasked with updating an older project to incorporate the latest technologies. Within the project's style sheets, some styles are prefixed with: #calendarDiv{ position:absolute; width:220px; *width:215px; *max-width:210px; border:1px s ...

cssinternet-explorer

Utilizing useStyles/jss to customize theme in Material Form Field and TextFieldRoot

Is there a way to customize Material themes for FormControl in MUI version 4? Specifically, I need the margin bottom of the parent HTML element containing a Textfield to be 8px instead of the default 4px. The code snippet provided below is not achieving th ...

reactjsmaterial-ui

Is CSS General sibling selector not functioning properly when used with :focus?

How can I display text that turns into an input form when hovered over, and stays visible even if it's unhovered but the user is interacting with the input form? The issue is that when the input form is focused while unhovered, both the input form an ...

cssfocus

The Bootstrap dropdown menu unexpectedly appears in front of the panel located above

Having trouble with the Bootstrap dropdown panel. My web page has 4 main panels, each containing additional bootstrap panels. When I open one panel at a time, everything works fine. However, when I try to open multiple panels simultaneously, the positions ...

htmlcssheightdropdownbootstrap-4

Troubleshooting Variances in CSS Layouts on Different Devices

I have been wrestling with a challenging question regarding CSS layouts, and I believe it's time to seek advice from those who may be more knowledgeable in this area. Let's discuss why my current layout is presenting such a headache. Take a look ...

htmlcsslayoutresponsivebox-sizing

In mui 5 styled-components [emotion], a common practice is to isolate the styles of a component

Hey there, hope everyone is having a great day! I have a question about utilizing mui 5 styled-components that are powered by emotion. I am curious if there is a recommended approach, perhaps a standard practice, for extracting the styles from my compone ...

reactjsmaterial-uistyled-componentsemotion

What is the best way to transform height in pixels to percentage in order to create a responsive design that adjusts smoothly on

Currently, I am in the process of developing a responsive grid system by using a max-width of 980px to convert my fixed PX widths to percentages. However, I am facing some challenges in updating the heights that are also set in PX to %. Could anyone provid ...

cssresponsive-design

Displaying text around columns and images using Bootstrap 4

Hello, I am facing an issue with my text not wrapping around the images while using Bootstrap 4. Instead of wrapping around, it stays on the right side. Could it be because I placed the images in separate columns? I want the two images to stack on top of ...

htmlimagecssbootstrap-4word-wrap

Tips for avoiding Bootstrap collapse overflow within a container that has overflow-y-scroll

I'm currently facing an issue with a container that has the overflow-y-scroll CSS property. Inside this container, there's a Bootstrap collapse button that expands to show more content when clicked. The problem arises when the expanded content ov ...

htmlcssscrollbaroverflowbootstrap-5

Is it possible for me to convert the contents of a <div> into a rasterized image when printing?

I have been using jquery.printElement.js to print a custom calendar table that I created. The functionality inside a div is mostly working as expected, but I am facing some challenges with the CSS. Despite passing along all necessary .css files, my cells a ...

jqueryhtmlcssprintingrasterizing

Eliminate the golden hue from the input field when autofill is activated

Can anyone help me figure out how to get rid of this unsightly chrome background that appears when autofill is enabled? (See below for reference.) I've attempted the following solutions: *:focus { outline: 0; } input:-webkit-autofill { -webk ...

htmlformscssinput

Spotting repeated terms within an HTML document

I have a table with results generated using v-html (meaning the text inside the table does not appear until the page is rendered). I want to compare two rows and highlight any duplicate words they may contain. While looking for examples, I came across a p ...

javascriptjqueryhtmlcssvue.js

How come it's so difficult to set the perspective camera to accurately display sizes in three js?

Currently, I am using Three Js to create a visual representation of a car. However, I am encountering an issue with the perspective camera that I can't seem to resolve. My goal is to make it appear more realistic by only showing the front of the car, ...

javascripthtmlcssthree.js

The onChange event was not able to be activated within the material-ui radioGroup component

Utilizing the RadioButton component to showcase different options of a question within a custom-built component: import FormControl from "@material-ui/core/FormControl"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import Grid from " ...

javascriptreactjsreduxmaterial-ui

Is there a way to modify the button's color upon clicking in a React application?

I am a beginner in the world of React and currently exploring how to utilize the useState hook to dynamically change the color of a button upon clicking. Can someone kindly guide me through the process? Below is my current code snippet: import { Button } ...

javascriptcssreactjsreact-hooksfrontend

Tips for adjusting the height of the Bootstrap navbar and ensuring the text remains centralized

I've attempted various methods to customize the Bootstrap navbar. I have successfully changed its color and adjusted its height. However, there is still an issue with the text alignment.Check it out here. ...

csshtmltwitter-bootstrapheightnavbar

Adaptive video player for complete YouTube experience

Is there a way to incorporate a YouTube video as the background of a div, similar to how it is done on this site, using a <video> tag and ensuring that the video "covers" the entire div without any empty spaces while maintaining its original ratio? ...

javascripthtmlcssyoutube