Creating a line with CSS is a straightforward process that involves using properties

I am trying to achieve a yellow line effect similar to the image shown using CSS. I have managed to create line holes so far, but I'm struggling with creating vertical straight lines. Here is an example of my current code:

https://i.sstatic.net/MqRUE.png

Below is my code snippet:

#holes {
  -webkit-mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   background-color: #1D3962;
   background-image: radial-gradient(circle at 120px 100%, transparent 0, transparent 65px, yellow 65px, yellow 68px, transparent 68px, transparent 100%);
   width: 100%;
   height: 100vh;
   margin: 0;
   padding: 0;
}
htmlcss

Answer №1

If you're looking for a solution to your problem, here's some code that might help! If it works for you, feel free to show your appreciation with a like! 😊

Adjusting the value of width can change the thickness of the element.

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#holes {
  -webkit-mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   background-color: #1D3962;
   background-image: radial-gradient(circle at 120px 100%, transparent 0, transparent 65px, yellow 65px, yellow 68px, transparent 68px, transparent 100%);
   width: 100%;
   height: 100vh;
   margin: 0;
   padding: 0;
}

#holes::before{
  content: "";
  display: block;
  width: 2px;
  height: calc(100vh - 68px);
  background-color: yellow;
  margin-left: 120px;
}
<div id="holes"></div>

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

The Javascript function fails to trigger during the OnKeyPress and OnKeyDown events

I have encountered an issue while trying to call a function called validateQty on both the onkeypress and onkeydown events of a text input field. When I was passing only one parameter, which is the event itself, everything was working perfectly fine. Howev ...

javascriptphphtml

Content obscuring dropdown menu

I am currently working on a screen design that resembles the following: return ( <SafeAreaView> <View style={styles.container}> <View style={styles.topContainer}> <View style={styles.searchFieldContainer}> ...

javascriptcssreactjstypescriptreact-native

Eliminate styling from text within an HTML document

I'm currently working on removing text decorations from my text. I managed to remove the underline, but when I hover over the text, the color still appears. How can I get rid of this color as well? Take a look at the code below: messbox { backgr ...

htmlcss

Updating the text of an element will occur only when the specified condition has been met

I am trying to dynamically change the text within the <span data-testid="recapItemPrice">ZADARMO</span> element from 'ZADARMO' to 'DOHODOU' only when the text inside the parent element 'INDIVIDUÁLNA CENA PREP ...

javascripthtmljqueryif-statementtext

What is the best method for implementing border-radius on select2 elements?

I previously had a default bootstrap user select box with a border-radius style applied: <div class="container"> <select class="form-control" style="border-radius: 1rem;"> <option value="1">Us ...

htmljquerycssbootstrap-4jquery-select2

In what ways can you toggle the visibility of table rows and data dynamically with the onchange event in HTML?

I'm dealing with an HTML code that can dynamically change table data based on user selection. Here's the snippet of my HTML code: Select an option: <select name='set' id="set" class="selectpicker" onchange='displayFields(this. ...

javascriptjqueryhtml

Introducing a new feature that allows automatic line breaks when using the detail

Looking to achieve centered text for a summary where the arrow, when clicked, reveals additional details. However, currently, the text and arrow are on separate lines. The goal is to have the arrow on the same line as the summary text and perfectly center ...

htmlcss

Strategies for delaying the loading of CSS when importing

import 'react-dates/lib/css/_datepicker.css' The CSS mentioned can be deferred since it is not critical. Is it possible to defer the loading of CSS when utilizing import? I found information on deferring CSS loading using <link> from Goo ...

javascriptcss

Tips for zooming to the middle of a div element

I'm trying to figure out how to create a zoom in effect on my large div, but I haven't been successful despite searching through many resources. My goal is to zoom into the center of the user's screen rather than just at a set position. ht ...

javascriptjqueryhtmlcss

PyQt TreeView scrollbar obstructing the header

I've been experimenting with the QTreeView widget (instead of QListView) in order to have a horizontal header. Additionally, I wanted to use stylesheets to customize the colors and appearance of the header and scrollbars. However, there is an issue w ...

pythoncsspyqt

Tips on making a progress bar with a reverse text color for the "completed" section

I've been tackling this issue for hours, but haven't found a working solution yet. The challenge is to create a progress bar with a dynamic width and a centered label that changes its text color between the progressed and unprogressed parts. Here ...

htmlcss

Internet Explorer automatically moves the cursor to the beginning of a textarea when it gains

When trying to insert "- " into an empty textarea, I am facing issues with Internet Explorer. While Firefox and Chrome work perfectly fine by inserting the text as expected, IE causes it to jump to the beginning of the textarea after insertion. Therefore, ...

javascriptjqueryhtmlinternet-explorertextarea

What might be the reason behind Chrome occasionally not updating the page when I resize the browser window?

Currently, I am in the process of developing a responsive design site prototype. Everything is going smoothly except for one peculiar issue that only seems to occur in Chrome. Sometimes, when expanding the window, the browser appears to get stuck between s ...

google-chromecsstwitter-bootstrapresponsive-design

showing errors in case the username does not match the specified pattern

As I work with symfony, one of the challenges is displaying errors when the username does not fit the specified pattern. How can this be achieved? {{ form_widget(form.username, {'attr':{'pattern': '[a-zA-Z]*'} }) }} ...

angularjsregexhtmlsymfony

Activate the overflow feature within native-base cards

I have a unique design element on a website that showcases an image overflowing off a card. The image has a negative margin-top of -50, creating this effect. Now I'm trying to replicate this design in react-native using native-base components. Here i ...

cssreact-nativenative-base

Having trouble with my bootstrap slider carousel - it's just not cooperating

I incorporated Bootstrap's carousel to display the various courses on my website, featuring three courses at a time before transitioning to the next set of three. However, I am encountering an issue with this setup. Please see the image below for refe ...

javascripthtmlcssbootstrap-5

Heading and paragraph text within the same row

I'm currently facing a challenge while working on the personal portfolio webpage project for freecodecamp. Everything looks good except for one issue. Although I have managed to center align my heading and paragraph text as intended, the paragraph te ...

htmlcss

Enable sidebar navigation exclusively for mobile and iPad devices

Is there a way to implement a different navigation bar specifically for mobile devices like iPads? I'm considering using this one: Here is the source code: JSFiddle If anyone knows how to achieve this, please share! <link rel="shortcut icon" typ ...

jquerycsstwitter-bootstrapsidebar

Tips for avoiding duplicate Id tags while using Ajax in MVC

Hello everyone, I am curious to learn about the precautions and techniques you employ when working with Ajax or MVC functions such as @Html.Action in order to effectively manage and prevent duplicate Ids for Html tags. In addition, how does the page handl ...

htmlajaxasp.net-mvc

Flexbox Alignment Problem with Mixed Text and Image Elements

Struggling to achieve a layout like the one in this image using Flexbox. Take a look: https://i.sstatic.net/EGsAN.png After some difficulty with floats, I've decided to experiment with flexbox. My CSS is set up to display the image correctly. The ...

htmlcss