What is the best way to include numerous triangles in a single element?

I have designed a timeline featuring milestones with circular images using the CSS property (border-radius: 100%). I am attempting to create arrows at both the top and bottom of each .milestone-image-holder element by utilizing the :before and :after pseudo elements. However, it appears that I can only apply an arrow to either the top or bottom, but not both simultaneously.

Below is the HTML code:

<ul class="milestones">
   <li class="milestone-left">
      <div class="milestone-img-holder">
         <img src="/assets/images/page/about-us/our-history/timeline_2011.jpg" />
      </div>
      <h5>2011</h5>
      <p>
         Sample text
      </p>
   </li>
</ul>

CSS Styling:

ul.milestones li.milestone-left .milestone-img-holder {
    position: relative;
    margin-left: -80px;
    float: left;
}

ul.milestones li.milestone-right .milestone-img-holder {
    position: relative;
    margin-right: -80px;
    float: right;
}

ul.milestones .milestone-img-holder:after, ul.milestones .milestone-img-holder:before {
        bottom: 98%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
}

ul.milestones .milestone-img-holder:after { 
        border-color: rgba(238, 59, 52, 0);
        border-bottom-color: #EE3B34;
        border-width: 3px;
        margin-left: -3px;
}

ul.milestones .milestone-img-holder:before {
        border-color: rgba(238, 59, 52, 0);
        border-bottom-color: #EE3B34;
        border-width: 9px;
        margin-left: -9px;
}


ul.milestones img {
    position: relative;
    width: 10em;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    border: 3px solid #ee3b34;
    background: #CCC;
}

View Example on JSFiddle

The provided CSS will only display an arrow at either the top or bottom. Altering properties such as bottom: 99% to top: 99%, and border-bottom-color: #ee3b34 to border-top-color: #ee3b34 will switch the arrow position. Unfortunately, achieving both arrows simultaneously seems challenging. Is this feasible?

css

Answer №1

Give this a try:

ul.milestones .milestone-img-holder:after {
    border-color: rgba(238, 59, 52, 0);
    border-top-color: #EE3B34;
    border-width: 6px;
    margin-left: -6px;
    top: auto;
    bottom: -6px;
}

Does this meet your expectations?

Check it out here: http://jsfiddle.net/praveenscience/jcS79/2/

This code snippet removes the arrows on the first and last child elements!

ul.milestones li:first-child .milestone-img-holder:before,
ul.milestones li:last-child .milestone-img-holder:after {display: none;}

See the updated version here: http://jsfiddle.net/praveenscience/jcS79/9/

Answer №2

Check out the JSfiddle Demo here!

Here is a Simplified CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.milestones {
    margin: 50px;
}
ul.milestones li.milestone-left .milestone-img-holder {
    position: relative;
    display: inline-block;
    float: left;
}
ul.milestones .milestone-img-holder:after, ul.milestones .milestone-img-holder:before {
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    border:6px solid transparent;
    position: absolute;
    pointer-events: none;
}
ul.milestones .milestone-img-holder:before {
    /* the top one */
    border-bottom-color: #EE3B34;
    top:0;
    -webkit-transform:translate(-50%, -100%);
     transform:translate(-50%, -100%);
}
ul.milestones .milestone-img-holder:after {
    /*the bottom one */
    top:100%;
    border-top-color: #EE3B34;
    -webkit-transform:translate(-50%, 100%);
     transform:translate(-50%, 0%);
}
ul.milestones img {
    position: relative;
    width: 10em;
    display: block;
    border-radius: 100%;
    border: 3px solid #ee3b34;
    background: #CCC;
}

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

Entering data into a webpage and retrieving the result from a designated cell in a Google Sheets document

Currently, I am in the process of developing a school platform and I am looking to incorporate a functionality that allows students to easily check the number of "passport" points they have earned. I envision having an input field along with a button that ...

javascriptphphtmlcssgoogle-sheets

Choose a radio button with a dynamic value in Selenium

How can I automatically select the radio button below with a changing value attribute? HTML: <form name="ViewQueryForm" method="post" action="/equery/getAttachments.do"> <div class="txt_align_left innerdvcont&q ...

pythoncssseleniumselenium-webdriverelement

Lower the transparency of a container without affecting the transparency of its elements

Is there a way to decrease the transparency of the page contents container background without affecting the opacity of the actual content? <div id="container"> <div id="page contents"> Insert your amazing articles and more here. </ ...

cssopacity

Scrolling to zoom in on the div content

I need the ability to resize the content within a div without changing the size of the div itself when the user scrolls. The function I currently have is as follows: var zoomable = document.getElementById('zoomable'), zX = 1; window.addEvent ...

javascriptjqueryhtmlcssresize

What is the best way to eliminate the extra space in my svg using CSS?

Is there a way to remove the unwanted spaces around this SVG image in my HTML document using CSS? The image has some red borders indicating the areas with excessive spacing. Here is a screenshot link for reference: https://i.sstatic.net/GYBH2.png The stru ...

htmlcsssvg

How to adjust the transparency of a background image in a parent div without impacting its child elements? (Using Twitter Bootstrap)

In an effort to enhance the aesthetics of a website, I have been utilizing Twitter Bootstrap. One snippet of my HTML code looks like this: <div class = 'container-fluid bg-1'> <div id ='yield_wrap'> ...

htmlcsstwitter-bootstrap

Steps for smoothly transitioning an element into a row and animating its neighboring elements to adjust their width using VueJS

Is there a way to smoothly slide-in an element in a row and have the other elements adjust their widths accordingly while maintaining their relative sizes? <div style="width: 100%; display: flex"> <div id="firstColumn" ...

cssvue.jscss-animationscss-transitions

Creating a custom CSS overlay for a jQueryUI widget

Having some trouble darkening the widget overlay provided by jQueryUI's "dialog". Despite trying to override the CSS used by jQuery, specifically the class ui/widget-overlay, I can't seem to apply my own styles successfully in my stylesheet. I a ...

jqueryhtmlcssjquery-uijquery-ui-dialog

What is the best way to avoid cluttering the URL with a lengthy list of HTML code when adding a navigation bar to a website

I have created a navigation bar with base.html, styles.css, and main.js. Within the navigation bar, I have included links to about.html and contact.html using: {%block content%} ... {%endblock%} However, when I click on the "About" link in the navigatio ...

pythonhtmlcssdjango

Troubleshooting Incorrect Image Alignment in Pygame: Solutions and Fixes

While trying to position my hovering image next to my mouse pointer, I want it to be exactly on the mouse cursor instead of slightly separated from it. You can see an example in this VIDEO EXAMPLE. Currently, the image is displayed next to the mouse pointe ...

pythonhtmlcsspython-3.xpygame

Position the div elements at the center

I am facing an issue with aligning elements inside a div both vertically and horizontally. I have tried various CSS methods like margin auto, but none seem to work. If you could provide a solution and explain how it works, it would be greatly appreciated. ...

htmlcss

Problem encountered when attempting to insert a new division into an existing flexbox container

I'm in the process of designing a basic login page using HTML/CSS. To center the box on the screen, I opted for a flexbox layout. So far, I have successfully positioned the Username/password fields and login button just the way I want them. The only t ...

htmlcssflexbox

Center align text in the uib-progressbar

Is it possible to center align text in the uib-progressbar? I attempted using position:absolute, but I would like to display a list of progress bars in a UI grid that includes scrollable content. The goal is for the text to remain fixed while the progress ...

cssangular-directiveangular-bootstrap

What is the method for creating a fixed position div that remains until a certain point?

Is there a way to prevent the position: fixed; property from being applied after a certain point on the screen scroll using only CSS? ...

csshtmlfixed

Expanding DIV to cover entire width of screen

Allow me to explain my current predicament: In the following code snippet, I have a simple div element. However, upon running the code, I am presented with a gray box that does not span across the entire browser window as I had intended. Instead, it appea ...

csswidthhtml

Trouble with activating Bootstrap panel

I have integrated bootstrap with Angular, but I am facing an issue with the panels not displaying correctly. After verifying that the files are in the correct locations,here is a screenshot of how it currently looks and this is the expected result. While ...

cssbootstrap-4

Issue with Google Map Info Windows resizing automatically, no changes have been made to the code

Take a look at my map application. By clicking multiple times on a red marker, you will notice that the info window changes size until it becomes unusually large, affecting all other windows as well. Interestingly, previous versions of my code from 1 month ...

javascriptcssgoogle-maps

Tips for deactivating the double class with jQuery

I need to implement a feature where all classes on a button are disabled if a specific class is present. I attempted to disable all classes, but it seems like I made an error somewhere. Jquery: if ($('.lgi_btn_cta_toggle').hasClass('lgi_ct ...

jquerycss

Background with a slanted angle and soft, curved edges

I am currently working on creating a unique background design for my divs. I envision a rectangle with rounded corners, but with the right corner positioned lower than the left one. What is important is that the height difference between the two corners re ...

csssvgbackgroundresponsiveclip-path

When SVGs are dynamically loaded, the SVG fill with "url(#foo)" disappears

Within my AngularJS web application, I am dynamically loading various SVGs and adjusting the opacity of their layers. Some paths within these SVGs have fill pattern properties like this: <defs> <pattern id="glass-floral" patternUnits="userSpace ...

javascriptcssajaxsvgfill