https://i.stack.imgur.com/sqZpM.png
I've been trying to create something similar, but my triangle keeps overlapping with the background in the next section. I've already spent 3 hours on it. Any help would be greatly appreciated.
https://i.stack.imgur.com/sqZpM.png
I've been trying to create something similar, but my triangle keeps overlapping with the background in the next section. I've already spent 3 hours on it. Any help would be greatly appreciated.
Check out this cool polygon design, feel free to customize the colors
div.container {
display: inline-flex;
align-items: center;
position: relative;
background: black;
width: 100%;
}
div.tangle {
height: 50px;
width: 200px;
clip-path: polygon(0% 20%,
60% 20%,
95% 20%,
100% 50%,
95% 80%,
60% 80%,
0% 80%);
}
div.tangle:nth-child(1) {
background:lightgreen;
transform: translateX(20px);
z-index:3;
}
div.tangle:nth-child(2) {
background:green;
transform: translateX(10px);
}
div.normal {
height: 30px;
width: 200px;
background: white;
}<div class="container">
<div class="tangle"></div>
<div class="tangle"></div>
<div class="normal"></div>
</div>To achieve this effect, you can utilize the ::before and ::after pseudo-elements. One will serve as the background for the 'next step', while the other will create the triangle with the background color of the 'current step'.
I opted for simple li elements without a tags, but it can easily be modified to accommodate a elements if needed.
It is recommended to avoid using opacity for step differences. Instead, use direct hex codes for better accessibility rather than adjusting opacity levels of a single hex code.
To prevent color bleeding, space out the li elements with margin and utilize the before/after pseudo-elements to fill in the gaps. This approach is preferable over overlapping elements to ensure that clicking on covered areas does not cause any issues.
Your stackbliz example has been enhanced with my edits. Be sure to take note of the alterations made to both the HTML and CSS.
Avoid using opacity for color lightening; instead, utilize SCSS's lighten and darken functions.
Make the most of CSS for styling by leveraging existing classes rather than modifying the HTML structure extensively.
REMEMBER: Make use of SCSS variables, nesting, and built-in functions.
Implemented a reverse z-index to stack elements in order from previous to next.
There are a total of 6 elements below.
[ngStyle]="{
zIndex: 6 - i
}"
I am encountering an issue with displaying the data from my CSV file in an HTML page. Here is a snippet of my CSV file: number:Int,english,french,german 1,one,un,eins 2,two,deux,zwei 3,three,trois,drei 4,four,quattre,four 5,five,cinque,fuenf 6,six,six,sec ...
I am currently developing drag and drop widgets using jQuery. After dropping them, I need to verify if my draggable and droppable widget is located inside another div. <div id="droptarget"> <div class="widget">I'm a widget!</div> ...
I'm brand new to CSS and could use some guidance Here's the issue: I have a 1600 pixel wide image and a div that is 100% wide. Is there a method to adjust the image so it fits within the div, eliminating any horizontal scroll bars and cutting o ...
I am attempting to create a basic if statement that relies on the value of a cookie. The function looks like this: function setHomePage() { if ($.cookie('settingOne') == 'jjj') { $('.secO').css('display', & ...
I've encountered an issue with some of my form fields where the field label doesn't move up to the top border of the field when you start typing in the input box. Instead, it remains in the middle of the box, causing the characters you type to ov ...
Recently, I was developing a login with OTP feature for my app. The front-end is being built using Angular and the back-end on ExpressJs. However, I have been struggling to find a way to secure the API. Every time I test the API using Postman, it works per ...
Currently, I am utilizing NgRx in an Angular NativeScript project for Android and iOS apps, and it is proving to be quite effective. However, one aspect that concerns me is the inability to use @ngrx/store-devtools and the Redux DevTools Chrome extension d ...
The issue lies in TypeScript not recognizing action.payload.index as a valid property. I am unsure how to resolve this problem and make the 'index' visible in my project. shopping-list.actions.ts import {Action} from "@ngrx/store"; im ...
Despite successfully compiling my code and having everything work perfectly, I encountered an error message in my IDE (Visual Studio Code) that is preventing me from deploying my app using ng build --prod: ERROR in src/app/training/training.service.ts(6 ...
Seeking to implement http2 on the client side of my Angular project. const http2 = require("http2"); const client = http2.connect("http://localhost:8443"); const req = client.request({ ":path": "/" }); Encountered an error when attempting an http2 r ...
I am looking to automatically insert a colon (:) after every 2 characters in my input field: HTML <input nz-input type="text" appLimitInput="textAndNumbers" name="mac" formControlName="mac" (keydown.space)=&qu ...
I have encountered an issue with my page setup that involves contracts and chats. Each chat corresponds to a specific contract, and depending on which chat or contract is open, the URL changes accordingly: david/contracts -> david/contracts/12 david/c ...
I have a problem with my expressjs app where I am trying to count records from multiple tables in a database and display the results on separate divs in HTML. Currently, the code is functional without any errors, but I am encountering an issue where the sa ...
Currently, I am utilizing a select element within Angular 5 while incorporating bootstrap 3. This component seems to be from WebForms / Bootstrap. I am curious if it is feasible to add images to the various options, possibly through the use of CSS? ...
While attempting to construct an angular project, I encountered the following error: Data path ".builders['app-shell']" should have the required property 'class'. Error: Schema validation has failed with the errors noted below: Data pa ...
I want to create a dynamic photosphere display within a div, where the source is determined by a selection from a drop-down menu. The select menu will provide options for different rooms that the user can view, and the div will contain an iframe to showca ...
What if I have two main routes, both loading the same child module? Is it possible to have two routes with the same name on the child module that load two different components based on the main route? Main Routes: export const ROUTES: Routes = [{ pat ...
Hey there! I'm currently working on a school project and I'm aiming to implement a drop-down menu. Surprisingly, it's proving to be more challenging than expected. <div class="parrent"> <div class="row"> ...
While working on my application test, I encountered a challenge when trying to validate the returns of two getBoundingClientRect functions. The first one, which is in an HTMLElement located by ID, gave me no trouble as I was able to mock its return success ...
I'm currently in the process of automating a workflow and I need to click on a link within a table row. The challenge is that all links within the rows share the same element ID, and the source code has a JavaScript code snippet like this: ("Element I ...