Create the design shown below without using the <pre> tag

Creating this pattern using <pre> is straightforward, but I am interested in achieving the same result with <div>

Is it possible to do this with margins?

I attempted to use margins and was able to achieve success, although some patterns proved challenging with this method.

Successfully Completed:- 

*********
**** ****
***   ***
**     **
*       *
*       *
**     **
***   ***
**** ****
*********

HTML 

<div class="pattern">
    <div class="space">
        *********<br>
        ****<span style="margin-left: 11%;"></span>****<br>
        ***<span style="margin-left: 33%;"></span>***<br>
        **<span style="margin-left: 55%;"></span>**<br>
        *<span style="margin-left: 77%;"></span>*<br>
        *<span style="margin-left: 77%;"></span>*<br>
        **<span style="margin-left: 55%;"></span>**<br>
        ***<span style="margin-left: 33%;"></span>***<br>
        ****<span style="margin-left: 11%;"></span>****<br>
        *********
    </div>
</div>

CSS 

.pattern {
    letter-spacing: 10px;
    margin: 10px;
    display: flex;
    font-weight: 700;
    font-size: 100%;
}

Desired Implementation

    *
   * *
  *   *
 *     *
*       *
 *     *
  *   *
   * *
    *

Snippet

.pattern {
  letter-spacing: 10px;
  margin: 10px;
  display: flex;
  font-weight: 700;
  font-size: 100%;
}
<div class="pattern">
  <div class="space">
    *********<br>
    ****<span style="margin-left: 11%;"></span>****<br>
    ***<span style="margin-left: 33%;"></span>***<br>
    **<span style="margin-left: 55%;"></span>**<br>
    *<span style="margin-left: 77%;"></span>*<br>
    *<span style="margin-left: 77%;"></span>*<br>
    **<span style="margin-left: 55%;"></span>**<br>
    ***<span style="margin-left: 33%;"></span>***<br>
    ****<span style="margin-left: 11%;"></span>****<br>
    *********
  </div>
</div>

htmlcss

Answer №1

I provided my own solution.

.child{
  text-align: center;
  font-size: 80%;
  font-weight: 700;
}
p:nth-child(1),p:nth-child(9) {
  letter-spacing: 5px;
  margin-right: -5px;
}
p:nth-child(2),p:nth-child(8) {
  letter-spacing: 25px;
  margin-right: -25px;
}
p:nth-child(3),p:nth-child(7) {
  letter-spacing: 50px;
  margin-right: -50px;
}
p:nth-child(4),p:nth-child(6) {
  letter-spacing: 70px;
  margin-right: -70px;
}
p:nth-child(5) {
  letter-spacing: 100px;
  margin-right: -100px; 
}
<div class="child">
  <p>*</p>
  <p>**</p>
  <p>**</p>
  <p>**</p>
  <p>**</p>
  <p>**</p>
  <p>**</p>
  <p>**</p>
  <p>*</p>
</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

Utilizing HTML5 audio elements with jQuery enhances the auditory experience

As I delve into creating a simple media section for a website, I have encountered some challenges that I would like to address. Let me explain the issue I am facing. I currently have a 'play list' consisting of 'links' - represented by ...

jqueryhtmlhtml5-audio

I am attempting to create a stylish border for the .navbar-collapse element, but unfortunately, my efforts have been unsuccessful so far

I need assistance with adding a border around my mobile drop-down menu. I've tried using .navbar-collapse but it's not working. Any suggestions? Here is a sample image of the mobile size: Below is my code: <nav class="navbar navbar-default ...

htmlcsstwitter-bootstrapborder

Tips for creating a unique scroll page arrow button with adjustable thickness?

Seeking guidance on how to adjust the thickness of the arrow used as a scroll button on my website. I am aiming for a similar look to the arrow on this particular website: example of arrow To view my code, please visit: Codepen .next { position:absolut ...

javascripthtmlcss

Tinymce editor does not display icons as expected

I am attempting to create a custom styled list that is editable with tinymce. The list-items are using Material-Check-Icons as bullet-points, which are added as css-pseudo-elements ::before. This setup works well, but when I integrate tinymce (v5) into the ...

javascriptcsstinymce

Using canvas to smoothly transition an object from one point to another along a curved path

As a beginner in working with canvas, I am facing a challenge of moving an object from one fixed coordinate to another using an arc. While referring to the code example of a solar system on https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutori ...

javascripthtmlcanvas

What is the best way to select an element based on its relationship to another Element object using a selector?

I am currently developing a small library in which I require the ability to select a relative element to the targeted element using the querySelector method. For instance: HTML <div class="target"></div> <div class="relative"></div& ...

javascripthtmlcss-selectors

Offset & Centralized Container using Bootstrap

I am currently attempting to center the header and input field using bootstrap. Unfortunately, I am facing an issue where I cannot get the input field to align properly with the header. If anyone has an alternative method for achieving this alignment, I ...

htmlbootstrap-4

Hover image displacement

Can anyone help me identify the feature used in this price list where the mouseover changes and a big image appears underneath? I'm trying to achieve something similar but can't figure out how. Any guidance would be appreciated. ...

htmlcss

Deselect a radio button with a click event using jquery

When the page refreshes, radio buttons are left unchecked. <input type="radio" name="test"> 1<input type="radio" name="test">2 <input type="button" id="btn" /> $("#btn").click(function(){ $(':radio').each(function () { ...

jqueryhtmltwitter-bootstrapradio-buttonunchecked

Updating the state of a React Component using data from 2 input fields

I am facing an issue with two input fields of type "file" in a React component. My goal is to load a JSON file into each input field, save the data from both files into separate variables, and update the state of the component. However, I have noticed that ...

javascripthtmlcssreactjsinput

CSS Stylelint rule to detect the 'missing selector' issue

My current process involves using stylelint to identify any CSS errors before building and deploying our site. However, a recent commit includes code that fails the CSS parser/minifier but passes stylelint validation. .example-class , /*.example-class-two ...

cssstylelint

Automatically showcase images from a directory upon webpage loading

Is there a way to modify my code so that the images from the first directory are displayed on the page when it loads, instead of waiting for a menu option to be clicked? The page looks empty until a menu option is selected, and I would like the images to s ...

javascriptjqueryhtmlcss

Tips for effectively highlighting search text within HTML content without causing any issues

I am in search of a solution that can assist me in searching for specific terms within an HTML string while also highlighting them. I have the ability to remove the HTML content from the string, but this poses the problem of losing the context of the origi ...

javascripthtmltypescript

Tips for aligning 2 columns perfectly in a 3 column layout

I am facing an issue with a grid section where the grid-template-column is set for 3 columns, but sometimes the content loaded dynamically only fills 2 columns. I am attempting to center the columns when there are only 2. Despite going through the grid CS ...

cssgridmultiple-columns

What are the steps for positioning material-ui icons to the right?

I have a list that is dynamically generated with the following code snippet: <list className = "todos-list"> {allTodos.map((todo, index)=> { return ( ...

cssreactjsexpressmaterial-uiweb-development-server

In the event that conflicting media queries take precedence over one another

I developed a set of queries for a particular element on a landing page. Here is the HTML structure: <div class="hsContent"> <article> This is my amazing content. Wow! </article> </div> This is how the initial styling looks fo ...

htmlcssmedia-queries

The div element continuously wraps its content when the browser size is reduced

Is there a way to prevent a div from wrapping or shifting below when resizing the browser to the left? I want this specific box to remain fixed in its position, causing the user to use the horizontal scroll bar to view it while everything else on the pag ...

htmlcss

Issue with loading function in FullCalendar React integration

Currently experimenting with FullCalendar v5 for React and exploring the Resource Timeline view feature. Facing an issue with the "loading" function - the idea is to monitor the state of FullCalendar and, if it's in a loading state, display a Spinner ...

htmlcssreactjsfullcalendarfullcalendar-5

Mastering the art of using transitions in conjunction with display properties

I'm trying to achieve a fade-in effect with the CSS property display:block. Here's my HTML code: <div>Fade</div> And here's my CSS code: div { display: none; transition: 2s; } div:hover { display: block; } Unfortunately, thi ...

htmlcss

Navigating to the end of the fixed-height table while inserting new elements

I'm experiencing an issue with a function that adds new items to a table with fixed height and overflow: auto set. When new items are added, the scroll should immediately go to the bottom of the table. Unfortunately, this is not happening as expected. ...

htmlvue.jsvuetify.js