Is there a way to make only the top, shaped part of this polygon have a 2px blue outline?
.graph {
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border:none;
height:200px;
width:100%;
background:red;
position:absolute;
bottom: 0;
}<body>
<div class="graph"></div>
</body>While this may not be the perfect solution, it's worth giving it a shot.
.graph {
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border:none;
height:200px;
width:100%;
background:red;
position:absolute;
bottom: 0;
}
.graph::before {
content: "";
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border: none;
height: 200px;
width: 100%;
background: white;
position: absolute;
bottom: -5px;
}
body{
overflow-y:hidden;
}<body>
<div class="graph"></div>
</body>To achieve a solid line, include additional data points. To adjust the thickness, consider utilizing a variable:
.visual {
--t: 5px; /* control line thickness */
height: 200px;
bottom:0;
left:0;
right:0;
position: absolute;
background :blue;
clip-path: polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%,100% calc(20% + var(--t)),88% calc(40% + var(--t)),69% calc(30% + var(--t)),56% calc(60% + var(--t)),32% calc(77% + var(--t)),9% calc(67% + var(--t)),0 calc(78% + var(--t)))
}
body {
background: lightgrey;
}<div class="visual"></div>Exploring the capabilities of the -webkit-box-reflect property in Chrome has proven to be quite interesting. By utilizing the code snippet provided below (taken directly from the Webkit blog), I have been able to achieve a fading reflection effect: -webki ...
Struggling to create a basic webpage with a container that extends to the bottom? Here's what I'm aiming for: #Main should be as tall as the viewport, but able to stretch further with additional content. body should match the viewport height, y ...
On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...
Looking to add a small square on the page for users to search and purchase courses directly. The square should be 4 columns wide, follow Bootstrap4 grid template, and be around 200-300 px in length. It needs to remain visible as the user scrolls down the p ...
After copying the letter A, I noticed that an empty string is being logged to the console instead of the expected A. However, when I paste, the console does successfully log the letter A. document.addEventListener('copy', handler); document ...
Here is an example of a form containing a button: <form> <input type="text"> <button>Click Me</button> <input type="submit" value="Submit"/> </form> Using the following JavaScript: $('form').subm ...
I've been following a tutorial on YouTube about reactJS, and the YouTuber recommended importing a CSS file into index.css to properly style the website. However, when I tried copying the CSS code and importing it into both App.js and Index.js, nothing ...
Looking for advice on how to make one of the horizontally scrolling DIV containers on a site scroll to a specific position onLoad. The challenge is that this particular container is located far down the page vertically, and we want it to scroll horizontall ...
I recently encountered an issue with the responsiveness of an image on my website. While it displayed correctly on Android and desktop devices, the image appeared distorted on iPhones as if the CSS width attribute was not applied properly. This problem spe ...
I'm trying to make a rectangle responsive based on the width of the window. This is my current logic: aspectRatio = 16 / 9 win = { width: window.innerWidth, height: window.innerHeight, } get browser() { const width = this.win.width - 250 ...
When I try to style an element in HTML using Sass, setting the width using percentages doesn't seem to work. I wonder if this issue is related to me using "content-max" to set the parent element's width and height? Here is a simplified version ...
The issue arises when I include the Boostrap CDN link, resulting in a change in font size. I discovered that Bootstrap has a default font size, which is why attempts to adjust it using an external style sheet with !important do not succeed. Interestingly, ...
Despite following suggestions, I am still unable to figure out why my form is not functioning properly. The form I have collects various information such as name, email, phone number, a select option, and a message in a textarea input. I dynamically change ...
My goal is to make my JavaScript code function properly when I insert it into either the head or body elements of an HTML document. Let's look at some examples: First, I insert the script into the body as shown in this example (works correctly): ...
I am currently utilizing fullcalendar 4 on my website and I am attempting to incorporate an indicator for when a user selects a date on the calendar. While the background color changes, it's not very visible. My aim is to replicate the functionality ...
After reading a question on StackOverflow about determining the number of filtered out elements, I wrote the following code in Angular: <input type="text" ng-model="query" placeholder="Enter query..."> <div ng-if="filteredData.length!=data.length ...
My question is why, when using the a tag, the entire row on the right becomes clickable as well? Despite there being no link, the area at the back of the row on the right side is clickable. Is there any way to remove this clickable area? <a id="ba ...
In my Next.js app, I make use of the react-tooltip library for tooltips. One peculiar issue that I have noticed is that whenever I refresh a page containing a tooltip, I encounter the following error: react-dom.development.js:88 Warning: Prop `dangerously ...
So here's the deal, I've got some dynamically generated html going on where I'm assigning 1-6 scaled svgs as children of a . The span is inline with 2 other spans to give it that nice layout: I want these "boxes" to all be the same width be ...
If you're short on time, let me explain my point with an image: Here is the HTML code I am working with: <div align="center"> <div class="img-container"> <div class="myconatiner"> <h2>Headline< ...