Struggling with creating a widget in React Js that has an image as the background? The image is designed to be dynamic, changing color and size based on the device. I've attempted using inline SVG and SVG within an img tag but can't seem to control both color and size simultaneously. Any suggestions or solutions for achieving this effect using CSS or another method would be greatly appreciated!
Below is the approach I came up with:
To make it responsive, adjust the outer width accordingly.
.outer {
width: 300px;
}
.upper-box {
width: 100%;
height: 150px;
background: blue;
border-radius: 15px 15px 15px 0;
}
.lower-box {
width: calc(100% - 12px);
height: 110px;
background: linear-gradient(to bottom right, blue 50%, transparent 50%);
}<div class="outer">
<div class="upper-box"></div>
<div class="lower-box"></div>
</div>To enhance the performance, try eliminating width, height, and fill attributes and utilize CSS instead:
svg {
width: 360px;
fill: #5795fa;
}<svg viewBox="0 0 300 349" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 8.9543 8.95431 0 20 0H280C291.046 0 300 8.95431 300 20V187.023C300 194.606 295.711 201.537 288.925 204.921L0 349V20Z"></path></svg>Here is a unique approach using pseudo elements where the size of the main element can be controlled by adjusting its width/height:
.box {
width:150px;
height:200px;
border-radius:10px 10px 10px 0;
overflow:hidden;
position:relative;
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:lightblue;
transform:skewY(-25deg);
transform-origin:left;
border-bottom-right-radius:inherit;
}<div class="box">
</div>If you wish to adjust the color from the main element, a gradient can be utilized:
.box {
width:150px;
height:200px;
display:inline-block;
border-radius:10px 10px 10px 0;
overflow:hidden;
position:relative;
background-size:0 0;
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:inherit;
transform:skewY(-25deg);
transform-origin:left;
border-bottom-right-radius:inherit;
}<div class="box" style="background-image:linear-gradient(red,red)">
</div>
<div class="box" style="background-image:linear-gradient(green,green)">
</div>Alternatively, CSS variables can be used:
.box {
width:150px;
height:200px;
display:inline-block;
border-radius:10px 10px 10px 0;
overflow:hidden;
position:relative;
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--c);
transform:skewY(-25deg);
transform-origin:left;
border-bottom-right-radius:inherit;
}<div class="box" style="--c:red">
</div>
<div class="box" style="--c:green">
</div>I would suggest enclosing the svg within a div element, as you have used the viewBox attribute in the svg, it will resize proportionally.
Check out this code snippet:
<div class="wrap">
<svg viewBox="0 0 300 349" xmlns="http://www.w3.org/2000/svg">
<path class="path" fill-rule="evenodd" clip-rule="evenodd"
d="M0 20C0 8.9543 8.95431 0 20 0H280C291.046 0 300 8.95431 300 20V187.023C300 194.606 295.711 201.537 288.925 204.921L0 349V20Z"></path>
</svg>
</div>
I have removed the width and height attributes from the svg, as well as the fill attribute from the path and added a class attribute so that you can adjust the wrapper's size and path color using the following CSS:
.wrap {
width: 500px; /* the height will adjust proportionally based on the viewBox */
}
.path {
fill: red; /* specify the desired color */
}
Below is a CSS shape resembling the svg design:
.box {
width: 300px;
height: 200px;
background-color: #5795fa;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
position: relative;
}
.box::after {
content: " ";
display: block;
position: absolute;
left: 0px;
top: 100%;
height: 0;
border-top: 30px solid #5795fa;
border-left: 150px solid #5795fa;
border-bottom: 30px solid transparent;
border-right: 150px solid transparent;
}<div class="box"></div>I’m working on a landing page and I have a section where I’d like to create a simple opacity animation using framer-motion. The issue is that these animations typically trigger as soon as you land on the page, but I want them to be based on scroll pos ...
As a beginner in web development, I successfully completed a project using Node, Express, and EJS (for the frontend). Now, I am eager to tackle another project with React as my frontend. Despite watching numerous React + Express tutorials on YouTube, I not ...
Currently, I am constructing a Tabler dashboard and incorporating some ReactJS components into it. Initially, I used traditional HTML pages along with Jinja2 templates. However, I have now started integrating ReactJS for certain components. I prefer not t ...
I am currently working on integrating a Time range field into my Wordpress page. Can someone please guide me on where to insert the code and how to display the range text box on my page? $('.timeRange').timeEntry({beforeShow: customRange}); f ...
I have one application currently running on port 3000 and I need to run another application on a different port in React Next.js. How can I make this change? In my package.json file, the current scripts section looks like this: "scripts": { & ...
jquery issue: the jquery that I added and the content doesn't change even though the "alert(model);" works fine <script> $(document).ready(function() { $("select.modele").change(function() { var modele = $(this) ...
I'm facing a problem with CSS3 media queries while developing a mobile site. The code I've written works perfectly on the landscape mode of an iPhone 5, but it's not quite right on an iPhone 4 or earlier in landscape mode. /* Default stylin ...
I am currently utilizing the SkyLight react component to create modal dialog boxes. My current challenge involves displaying different content in the modal dialog using just one button. <a className="btn btn-secondary" onClick={() => { this.setSt ...
I need help removing a specific item from my React state. Current scenario: When certain checkboxes are selected, I update their state accordingly. My useEffect hook has the checkboxes state as its dependency, and every time there is a change, I add cont ...
I need assistance with exporting Excel Charts from NVd3 using Angularjs. Here is the code I have been trying: (jsfiddle) <button id="myButtonControlID">Export Table data into Excel</button> <div id="divTableDataHolder"> <table> ...
Attempting to integrate this code into a TypeScript project, it is a modified version of the react-custom-scrollbars. I am struggling with TypeScript in regards to declaring types for style and props. In this particular case, I prefer to bypass type check ...
I've been trying to figure out why the search button is still showing at the bottom left and creating an "l" shape even though I'm using style="overflow: hidden; padding-right: .5em;". Does anyone have any ideas as to what might be causing this i ...
I am in the process of developing a website that includes a unique structure that I have not encountered before. This layout involves joining multiple sections within a wrapper. As this is my first time attempting such a layout, I am encountering some chal ...
Instead of using this.refs.myField.getValue() or this.refs.myTextField.input.value, which are deprecated, I am looking for an alternative solution. I prefer not to use the onChange event inside the TextField component but convert the text when the user cl ...
I am currently learning how to use Material UI, and I am facing an issue with aligning the TextField component and the ButtonGroup component vertically. I attempted to adjust the Grid/Grid item settings but did not have any success. Any assistance on this ...
I'm currently developing in React and facing a challenge where I need to trigger a fade animation for an element only when it becomes visible on the screen. The issue is that right now, the animation plays as soon as the page loads, which defeats the ...
Currently, I am utilizing the @each loop to go through items but would like to start with an index of 1 instead of 0. I attempted to resolve this by including the following code snippet: var Handlebars = require('handlebars'); Handlebars.regist ...
Within a container, I have mui Chips that contain labels. The objective is to utilize these chips as selectors, using onClick to add the label values to a list that will be sent in an Axios request. This needs to be achieved without the use of a textfield, ...
I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...
I need assistance with validating dynamically created textareas. In the code below, I am able to validate only the first row but struggling to do so for the second row. How can I get all the row values validated? Thank you in advance. To generate dynamic ...