Creating geometric designs using CSS

I have successfully designed a shape using only CSS. You can view my work by clicking on the following link:

http://jsfiddle.net/kaHek/119/

CSS:

#applicationStatus {
    position: relative;
    width: 630px;
    height: 140px;
    top: 20px;
    left: 40px; }

    ul.applicationStatus {
    list-style: none; }

    li.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGood {
    height: 140px;
    background-color: #767676;
    display: inline-block;
    /* Dirty IE Hack */
    zoom: 1;
    *display: inline;
    margin-right: 30px;
    padding: 10px;
    color: white;
    font-size: 18px;
    text-align: center;
    line-height: 150px;
    /* vertical-align: middle; */ }
    li.applicationStatus:after, li.applicationStatusGood:after, li.applicationStatusNoGood:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 80px solid transparent;
    border-left: 30px solid #77a942;
    border-bottom: 80px solid transparent;
    margin: -10px 90px 0 0px; }

HTML

<div id="applicationStatus">
        <ul>
            <li class="applicationStatus">Başvuru Alındı</li>
            <li class="applicationStatusGood">Dil Sınavı</li>
            <li class="applicationStatusNoGood">Sözlü Mülakat</li>
            <li class="applicationStatus">Hibe</li>
        </ul> 
    </div>

My goal is to achieve the following:

I am facing difficulty in aligning the arrow section of the image. I used the :after pseudo-element with guidance from css3shapes.com to create that part, but I am struggling to align it correctly.

Although setting the margin value of the after selector works well for vertical positioning, it does not seem to apply for horizontal positioning.

What should be my next step?

cssshapesalignment

Answer №2

Rules for Margins:

Margins: 25px top, 50px right, 75px bottom, 100px left;
  • The top margin is set to 25px
  • The right margin is set to 50px
  • The bottom margin is set to 75px
  • The left margin is set to 100px

In this specific scenario, using margin: -10px 90px 0px 10px; works well.

Ensure that the last value matches the padding: 10px; in your 

li.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGood
method.

Answer №3

Another option is to try the following:

demo

Here is the relevant code snippet:

li {
    position:relative;
}

li:after {
    right:-30px; /* width of element */
    top:0;
}

Answer №4

Here is the solution you've been looking for! Take a look at this awesome code snippet:)

Check it out on jsfiddle!

Code:

HTML:

<div id="css3">
    <ul>
        <li class="css3">HTML5/CSS3</li>
        <li class="css3">Shapes</li>
        <li class="css3">Hello World!</li>
    </ul>
</div>

CSS:

#css3 {
  position: relative;
  width: 630px;
  height: 140px;
  top: 20px;
  left: 40px;
}

ul.css3 {
  list-style: none;
}

li.css3 {
  height: 140px;
  background-color: #76a942;
  display: inline-block;
  /* Dirty IE Hack */
  zoom: 1;
  padding: 10px;
  color: #fff;
  font-size: 1em;
  text-align: center;
  line-height: 150px;
  margin-left: 50px;
  }

li.css3:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 40px solid #76a942;
    border-top: 80px solid transparent;
    border-bottom: 80px solid transparent;
    margin: -10px 90px 0 10px;
}

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

Halt spread: descend in a bubble?

It seems that the issue at hand may not be related to propagation, but rather a design flaw. I have come across information suggesting that propagation problems tend to bubble up, however, let me explain my situation. I am working with a table edit grid. ...

javascripthtmlcssangularjsstoppropagation

What is the best way to implement horizontal scrolling for square boxes arranged in a row using html/css?

Recently, I created a fiddle that looks amazing in desktop view, with square boxes aligned perfectly as shown below: https://i.sstatic.net/F2flK.png The CSS code snippets used to achieve this horizontal alignment of the square boxes are: .squares { di ...

htmlcssscrollresponsive-designmedia-queries

Having problems with CSS in your HTML?

Ever since I added <!DOCTYPE html>, my CSS has been causing issues. I realize I should have included the doctype from the beginning, but I didn't. I suspect the problem may lie within the grid (specifically ag-grid) divs, possibly related to th ...

htmlcssangularjsdoctype

Improve the parallax effect in your React component

Do you have any tips on smoothing out the scrolling animation for a React component with a simple parallax effect? I tried using requestAnimationFrame() in vanilla JS, but it doesn't seem to work well within the React component's rendering cycle. ...

javascriptcssreactjs

What steps can be taken to avoid the table row from getting hidden behind the table header?

I am aiming to implement sticky headers for a table using only CSS. You can refer to this link for guidance: Table fixed header and scrollable body Everything looks good when the page loads, but as soon as I start scrolling, a sliver of data appears abo ...

htmlcss

Breaking an array in JavaScript

I'm developing a pure JavaScript hangman game and facing an issue with splitting words from an array into single letters. When I split the array, I get "," for every letter. For example, when I split the word [station], it returns "s,t,a,t,i,o,n". M ...

javascripthtmlcssarrayssplit

Creating a Sudoku puzzle grid with HTML and CSS - a step-by-step guide

Apologies for the basic inquiry, but I have created a sudoku grid with the following structure. Modified(Using Tables): <table id="grid" border="1" style="border-collapse: collapse;"> <tr class="row"> ...

htmlcss

Scrolling may cause Opacity to return a negative value

I'm facing an issue with my code that involves fading the opacity of a div named .overlay when the user is 100vh from the bottom of the screen. The problem arises when the screen width changes and causes elements to grow taller, resulting in the opaci ...

jqueryhtmlcss

Steps to keep the gridlines in the chart from moving

Take a look at the example provided in the following link: Labeling the axis with alphanumeric characters. In this particular instance, the gridlines adjust dynamically based on the coordinate values. How can we modify this so that the chart remains static ...

javascripthtmlcsssvgd3.js

Customize the appearance of a shadow-root element

Is there a way to modify the styles of a shadow element? Specifically, is it possible to extend or overwrite certain properties within a CSS class? I am currently using a Chrome extension called Beanote, which has not been updated since April 2017. There i ...

javascriptcssweb-componentshadow-dom

Issue with the top margin of the body

Recently, I've encountered a peculiar problem with a standard website layout that I use. The issue seems to be centered around the space between the top and the first div: navbar. No matter what I try, I just can't seem to remove it, as the reas ...

htmlcss

Hovering triggers the appearance of Particle JS

I am attempting to add particle js as the background for my website. I have tried implementing this code snippet: https://codepen.io/nikspatel/pen/aJGqpv My CSS includes: position: fixed; z-index: -10; in order to keep the particles fixed on the screen e ...

javascripthtmlcss

White line separating the menu options from the rest of the content

I have spent the last few days working on my website MY SITE. I decided to use the UBER menu plugin to customize my menu display, and it's been working well. However, there is a thin white line appearing above the menu items when they are displayed. I ...

htmlcsswordpressnavigation

Positioning an image/carousel at the bottom of multiple without the need for alignment

I'm in the process of creating a single-page website with sections stacked on top of each other, including a section where divs are stacked both next to and on top of each other. Within this section, there is a container div that holds 5 divs named bo ...

htmlcssbootstrap-5

Alignment issues with the layout

I am facing an issue with two containers stacked on top of each other. The bottom container is wider than the top one, and both have auto margins set for the left and right sides. I want the top container to be aligned evenly on top of the bottom one. I c ...

htmlcsslayoutcss-float

Struggling with creating text that adapts to various screen sizes when displayed

As someone who is new to HTML/CSS, I recently developed my first website using the Cargo platform. Within a section on my site featuring various videos, I encountered difficulty in properly positioning the titles over them while ensuring they remain respo ...

htmlcss

Automatic resizing of text areas based on available space with CSS

In the process of developing an ASP.NET MVC application with Bootstrap for view layout, I encountered a challenge specific to multiline Textareas and their width behavior. The target browser for this project is IE 10+ and my goal is to restrict the maximum ...

cssasp.netasp.net-mvctwitter-bootstrap

A unique way to present data: An HTML table featuring four fixed columns with horizontal scrolling

I've been having difficulty creating a table with fixed first four columns while allowing the rest to scroll horizontally. I came across this example first column fixed Although the example has the first column fixed, I'm struggling to extend it ...

csshtml-table

What is the best way to display link icons - as images or using CSS background-image URLs?

When designing a web UI, I am considering using iconography to represent actions such as adding, editing, deleting, and searching for items. However, I want to ensure that the purpose of each action is clear without displaying text and cluttering the UI sp ...

cssasp.net-mvciconsbackground-imageimage

Display the sidenav bar using ng-show

As I continue to work on my website, I encountered an error that has me puzzled. The website is a single page application with angular routing, and I have chosen not to utilize bootstrap for this project. My current challenge involves trying to reveal a si ...

htmlcssangularjsresponsive-design