A step-by-step guide on crafting a triangular-shaped div connected to another div

After working with HTML elements and trying to incorporate 2 divs, I realized that I couldn't achieve the triangle-shaped div that I actually needed. I have included an image for reference.

Below is the HTML code snippet:

<div style="background-color:#999999;margin-bottom:20px;"> 
   <div class="activeHeader h4Bold" style="width:40%;display:inline-block"><span class="h3Bold" style="margin-right:12px;color:#ffffff!important">1</span> Define Finished Product and Tracability Workflow</div>

    <div class="inactive h4Bold" style="width:40%;display:inline-block"><span class="h3Bold" style="margin-right:12px;color:#000000!important">2</span> 
    </div>
</div>

Accompanied by the corresponding CSS:

.activeHeader
{
    padding:9px 24px 9px 12px;
    background-color:#000000;
    color:#ffffff;
}
.inactive
{
    padding:9px 24px 9px 12px;
    background-color:#cccccc;
    color:#000000;
}

Link to view on jsfiddle: http://jsfiddle.net/prashantbirajdar123/YM76v/

Also, here's the output image provided:

htmlcss

Answer №1

Using pseudo elements and CSS triangles can achieve the desired effect. Check out this example.

.activeHeader:after{
    content: ""; // This creates the appearance of an element
    position: absolute; 
    top: 0;
    left: 100%; // Positions it off the right side
    width: 0; 
    height: 0; 
    border-top: 18px solid transparent; // Triangle shape properties
    border-bottom: 18px solid transparent;
    border-left: 18px solid black;
}

I haven't completed the entire task for you because where's the fun in that? Hopefully, this sets you on the right track. Feel free to ask if you need further assistance.

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

Modify a section of an HTML text's formatting

function changeEveryCharColor(id) { var part; var whole = ""; var cool1 = document.getElementById(id).innerHTML; console.log(cool1); for(var i = 0; i < cool1.length; i++) { color1 = getRandomInt(255); ...

javascripthtmlcss

What is the best way to include a JavaScript function in a dynamically generated div?

By clicking a button, I am able to dynamically generate a table row that contains a div element with the class "contents." $(document).on("click", ".vote", function() { // Removing selected row var rowLoc = this.parentNode.parentNode. ...

javascriptjqueryhtml

What is the best way to display content next to an image, as well as below the image once it finishes?

Currently, I am working on customizing my blog posts in WordPress. My goal is to have the content of each post displayed next to the post thumbnail, and once the image ends, the content should seamlessly flow underneath it from the left side. I have imple ...

htmlcsswordpressbootstrap-4text-alignment

Place the two buttons in position

I have a section where I need to include two buttons. One button on the left labeled "Sunday" and one on the right labeled "misc". I want the two buttons to be evenly placed within the area, so I assigned them the same class since they are the same size. ...

htmlcss

Creating an array of multiple divs based on numerical input

I am working on a project to show multiple divs based on the user's input number. For example, if the user selects 3, then 3 divs should be displayed. While I have successfully implemented this functionality, I need to dynamically assign IDs to each ...

javascriptjqueryhtml

Tips for adding a picture to a server and applying CSS filters to enhance it

I recently came across a set of CSS filters that can be applied to images by simply specifying the filter ID. Now, I'm looking to create a button that will allow me to save the edited image (with the filter applied) to a designated file location. I&a ...

javascriptphphtmlcsscanvas

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Trying to achieve a sleek fade-out effect at the end of a text section for a 'read more' indicator. I've been studying various tutorials, including this, and my current code is as follows: html <section> <p>Lorem ipsum dol ...

csshtmlfadefadeoutfadein

How to customize the appearance of an HTML checkbox using custom images for a unique

Does anyone know how to change the default style for: <input type=checkbox...> I want it to use my own styled pictures instead of the default style. Can anyone help? Thank you! ...

htmlcss

Random Image Generator in Javascript with Links

I am attempting to load one image at a time along with its corresponding link. My goal is to display the image in a div with an ID of 'ads'. Here is the code I have so far, but I am not proficient enough in JavaScript to achieve my desired outcom ...

javascriptjqueryhtmlimagesrc

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

javascripthtmlcssjointjs

The wget tool is capable of downloading CSS files that contain @import rules, however it overlooks

Currently utilizing the following command with wget: wget --page-requisites --convert-links -e robots=off \ --span-hosts --restrict-file-names=windows \ --directory-prefix=$ASSETS_DIR --no-directories http://myhost/home The HTML page ...

csswget

Step-by-step guide on displaying a tag image in HTML using html2canvas

html2canvas($('#header'), { allowTaint: true, onrendered: function (canvas) { var imgData = canvas.toDataURL("image/png"); console.log(imgData); } }); click here for an example ...

javascriptjqueryhtmlhtml2canvas

The v-select menu in Vuetify conceals the text-field input

How can I prevent the menu from covering the input box in Vuetify version 2.3.18? I came across a potential solution here, but it didn't work for me: https://codepen.io/jrast/pen/NwMaZE?editors=1010 I also found an issue on the Vuetify github page t ...

javascriptcssvue.jsvuejs2vuetify.js

Is it possible for images underneath to receive focus when hovering over them?

I'm struggling with a layout of thumbnails on my page. We'll refer to them as A, B, C, etc. They are currently displayed like this: A, B, C, D, E, F, G, H, I, J, K, L, M, N... and so on. When you hover over one thumbnail, it enlarges by 2.5 t ...

javascriptjqueryhtmlcss

The alert feature does not seem to be functioning properly when displaying error messages

// Issue: Alert is not working on error message. I intend to only display up to four issues, after that it should not work. success: function(msg, String, jqXHR) { window.location = 'home.html'; $("#result").html(msg, String, jqX ...

javascriptjqueryhtmlajax

Disordered block elements

I am having trouble centering a div in my footer. When I try to center it, the div ends up floating on top of the footer instead. Here is the link to the codepen. footer { text-align: center; background-color: grey; position: fixed; bottom: 0; width: 100 ...

htmlcss

Angular: Design dependent on attributes

Can I customize the styling of a div in accordance with a boolean property called "isActive" on my controller using Angular? <div class="col-md-3" (click)="isActive = !isActive"> <div class="center"> <i class="fa fa-calendar"& ...

javascriptcssangular

jQuery if statement appears to be malfunctioning

When the condition operates alone, everything works fine. However, when I introduce an 'and' operation, it does not function correctly. If only one of them is true, the code works. It also successfully takes input values. <!DOCTYPE HTML Code ...

javascriptphpjqueryhtml

What causes pagination to be displayed outside of the main section in Firefox when using swiper?

When using swiper, why does pagination display outside of the main section in Firefox when inserting slides with different content lengths? This issue seems to only occur in Firefox and not in other browsers like Chrome. I have noticed that using two boots ...

htmlcssbootstrap-4swiper.js

Creating a JavaScript anchor through a backend bean function

Is it crazy to want to create an anchor that can be called from a backing bean method using JavaScript? I need to do this for specific reasons, utilizing a commandButton with ajax set to false. I'm attempting the following approach: RequestContext.g ...

javascripthtmlajaxjsfprimefaces