Creating dashed and dotted lines and rectangles using CSS

How can I create dash dot and dash dot dot lines and rectangles using only CSS, without relying on external image links or other resources (inline data urls may be used if necessary)?

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

The following CodePen link showcases some examples.

hr.style17:after {
    content: '§';
    display: inline-block;
    position: relative;
    top: -14px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #8c8b8b;
    font-size: 18px;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
}

This example utilizes the content and rotate CSS properties. Perhaps these can be utilised for creating similar effects.

htmlcssborder

Answer №1

One way to create a unique design is by utilizing a mix of repeating-linear-gradient and radial-gradient

.dash-dot {
  height:50px;
  background:
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 50%/20px 5px repeat-x,
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) center/100% 3px no-repeat 
}
.dash-dot-dot {
  height:50px;
  background:
    radial-gradient(circle at center,#000 2px,transparent 3px) 0px  50%/30px 5px repeat-x,
    radial-gradient(circle at center,#000 2px,transparent 3px) 10px 50%/30px 5px repeat-x,
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 30px) center/100% 3px no-repeat;
}
<div class="dash-dot"></div>

<div class="dash-dot-dot"></div>

If you want to achieve a rectangle shape, the same pattern should be repeated on each side:

.dash-dot {
  height:210px;
  background:
    /*right*/
    repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) calc(100% - 1px) 0/3px 100% no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 100% 5px/5px 20px repeat-y,    
    /*left*/
    repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) 1px 0/3px 100% no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px)  0 5px/5px 20px repeat-y,
    /*top*/
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 1px/100% 3px no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 0/20px 5px repeat-x,
    /*bottom*/
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 calc(100% - 1px)/100% 3px no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 100%/20px 5px repeat-x;
}
<div class="dash-dot"></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

leveraging the unique MySQL id displayed within the onclick/checkbox identifier

I am currently working on a website that displays database content and enables users to click on the content to view more information related to that specific id. I also want to include a checkbox next to each piece of content that will allow me to delete ...

phphtmlmysqlcheckboxonclick

Guide on triggering a function with the Enter key in Angular 9

A button on my Angular component currently triggers a method with a (click) event, but I also want the same method to be triggered if the user presses the enter key in the input box. This gives the user flexibility. Below is the HTML code for the input an ...

htmlangular

The height of the div element is causing issues for the adjacent item in the row

I am facing a styling issue where the height of my avatar image is affecting other inline items located next to it. The images below demonstrate this problem. https://i.sstatic.net/bovge.png https://i.sstatic.net/EsF2R.png As you can see, when I increas ...

css

What could be the reason behind jQuery replacing the entire span with .text?

I am dealing with the following HTML code snippet: <p><input id="revenue" type="text" value="100000" /><span id="howmuch"><a href="" class="ka_button small_button small_cherry" target="_self" style="opacity: 1; "><span>How Mu ...

javascriptjqueryhtml

Pictures Unavailable to Show in Table

I've been working on a project where I need to insert some images into a table. Usually, this isn't an issue for me. However, today when I added the images to the table, all I see is a square border with the alt text inside it. I'm confident ...

htmlcss

In a Twitter Bootstrap environment, the button cursor transforms into an I-beam when activated

After utilizing twitter bootstrap to construct a small blog site and integrating a third-party file upload application into the project, I encountered an issue. The CSS files in the file uploader style the "upload button," but when my cursor hovers over it ...

htmlcsstwitter-bootstrap

Two elements failing to display side by side

Can someone help me figure out how to align the quantity and Add-to-cart button on the same line? The quantity is displaying as a block element even though I set it as inline... any suggestions would be appreciated! Visit this link for reference. I' ...

csswordpresswoocommerce

The alignment issue of Owl Carousel card being off-center

I can't seem to get my owl carousel properly centered on my website. I've set up the owl carousel to showcase customer testimonials on my landing page, but it's slightly off to the right and not aligning correctly with the testimonial title. ...

javascripthtmlcsswebcarousel

Material-UI Date Selectors: Show the Date in (Month, Day, Year) Format -> (April 17, 2019)

If you're using the Material-Ui Pickers library, check out this link for more information: It appears that you can display the date as a (Month Day) string or as a (MM/DD/YYYY) format. However, I'm wondering if there is an option to display the ...

htmldatematerial-ui

Enhancing jQuery UI Tabs with HoverIntent

I'm currently working on incorporating HoverIntent into my jQuery tabs, but I seem to be facing some issues. Below is the code snippet that I've been using. Any suggestions or tips would be greatly appreciated. Thank you! The code was sourced di ...

jqueryhtmljquery-uihoverintent

When using the JQuery click() function, the condition inside the if statement will only trigger after 2 clicks, while any code outside the if block will execute after

As I delve into learning JQuery, I've encountered a strange issue while trying to implement an if condition within the click() function. It seems that when I include an alert statement right before the if condition, the alert pops up on the first clic ...

jqueryhtml

Adjusting the hue of each fifth div

There are multiple divs in a row, with 4 divs in each row. To adjust the padding of every 4th div, I'm using the nth-child selector. Now, I am looking to modify the rollover property every 5th time. Here is an example of what I have in mind: .cont ...

htmlcsscss-selectors

Utilizing Bootstrap for aligning a span element beneath a div container

I'm working on enhancing a project by integrating more Bootstrap elements. In one part, I have a circular div with the text "Go to Homepage" below it. My goal is to center the span under the div and have it appear on a single line. How can I achieve t ...

htmlcsstwitter-bootstrappositionmargin

The concept of DIV layers and utilizing the jquery click function

My project includes a cool postcard feature that involves animating an overlay div and displaying a postcard on top of it. Here's a snippet of the HTML code: <div id="overlay"> <div class="postcard"> <p>This is a postcar ...

javascriptjqueryhtmldom

What steps can I take to modify my webpage, like a dashboard, on the internet?

Whenever I click on a menu item in the sidebar of my HTML file, I want only the body section to change without affecting the navigation or sidebar content. For instance, if I select the "Coding Convention" menu in the sidebar, I would like the page to swi ...

javascriptjqueryhtmlajaxweb

Deleting a row from a table using TypeScript in Angular

I am currently working on a task management application and I am facing an issue with deleting a row when clicking the delete button. Below is the table structure in my HTML: <table *ngFor="let todo of todos; let i = index;" class="todo ...

htmlangulartypescript

Enhancing User Experience in VueJS with Pug Templates and Transitions

Managing multiple 'pages' of content within a multi-step process can be challenging, especially when trying to incorporate VueJS's transition feature for a carousel-like slide in/out effect. The contents being transitioned are stored in sepa ...

cssvue.jspug

I have developed a function that will trick the program into believing that the user did not input anything. Is there a way for me to retain

Currently, I have input fields that do not clear out automatically once the user hits Send. Here is the code snippet enabling users to input data into various fields: <form method="post"> {% csrf_token %} {{ form.as_p }} <bu ...

htmldjangoonclick

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...

javascriptjqueryhtmlcss

Reordering the stacking order of Grid Items in material-ui

I'm facing an issue with the stacking order of grid items when the browser shrinks. On a regular desktop screen (lg): --------------------------------------------- | col 1 | col 2 | col 3 | --------------------------------------- ...

cssreactjslayoutgridmaterial-ui