How may I utilize CSS to generate a dynamically resizing rotated triangle that adjusts based on the text content?

Looking to add a dynamic badge in the top left corner of a div that adjusts its size based on the text content.

Check out this example: http://jsfiddle.net/sbick/npxaasht/

<article>
    <div class="triangle"> 
        <span>NEW</span>
    </div>
    <p>lorem ipsum</p>
</article>

<article>
    <div class="triangle"> 
        <span>BACK ORDERED</span>
    </div>
    <p>lorem ipsum</p>
</article>

These two elements have varying amounts of text. "NEW" fits perfectly due to hardcoded values, while "BACK ORDERED" spills over the triangle shape.

I'm seeking a solution where the triangle dynamically adjusts its size to accommodate different text lengths.

Is it achievable using CSS?

htmlcss

Answer №1

Unfortunately, you cannot achieve automatic triangle resizing using only CSS; JavaScript would be required for that functionality.

However, if you’re open to a CSS-only solution (though not fully automatic), I have created a new JSFiddle to address your problem.

HTML

<article>
    <div class="triangle" type="new"> 
        <span></span>
    </div>
    <p>lorem ipsum</p>
</article>
<article>
    <div class="triangle" type="backorder"> 
        <span></span>
    </div>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
</article>

New CSS (old CSS must also be retained)

.triangle[type=new] span::before{
    content: "NEW";
}

.triangle[type=backorder] span::before{
    content: "BACK ORDER";
}

.triangle[type=backorder]{
    border-bottom: 80px solid #f16a6c;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    margin-left:-62px;
    top:-32px;
}

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

The CSS overlay effect refuses to shut down

Greetings everyone, I'm new around here so please bear with me. I am encountering an issue wherein the overlay only works in one direction - it appears when the button is clicked, but nothing happens when attempting to close it. I have tried adjustin ...

jqueryhtmlcssscrolloverlay

Sliding Up Transition Effect for Footer with JQuery or CSS3

I am attempting to replicate a sleek slide up footer that caught my eye on The Internship Movie Site. I have created the wireframe layout, but I am struggling to figure out the correct CSS transition effect. Although I have experimented with the "top" and ...

jqueryhtmlcss

Is it possible to protect assets aside from JavaScript in Nodewebkit?

After coming across a post about securing the source code in a node-webkit desktop application on Stack Overflow, I began contemplating ways to safeguard my font files. Would using a snapshot approach, similar to the one mentioned in the post, be a viable ...

javascriptcssbinaryfont-facenode-webkit

Align the items in the center of a Bootstrap navigation bar

I am looking to center the navigation menu items on my navbar. Currently, my navbar layout appears like this: Specifically, I want "Users", "Admin", and "Records" to be centered within the navbar. Additionally, I would like to adjust the alignment of the ...

cssbootstrap-4flexbox

What is causing my background image to move upward when I include this JavaScript code for FlashGallery?

There's an issue on my website where adding a flash gallery script is causing the background image to shift unexpectedly. You can view the affected page here: The culprit seems to be the "swfobject.js" script. I've identified this by toggling t ...

javascripthtmlcssflash

Using Object Values and Subvalues to Assign Element Attributes in jQuery

I have a weekly schedule that I update regularly using a static table layout: <table> <tr class="live gm fsp"> <td>Oct. 7</td> <td>12:30 pm</td> <td class="prog">Show 1</td> <td>Team ...

javascriptjqueryhtmljsonobject

Align image within box using Bootstrap

My project screenshot is displayed below. The red line separates the current state from the desired outcome. I am struggling to make it fullscreen, meaning it should extend all the way to the corners. Despite trying various methods with Bootstrap 4, I have ...

htmlcsstwitter-bootstrapbootstrap-4

How come Angular8's routerLinkActive is applying the active class to both the Home link and other links in the navigation bar simultaneously?

Currently, I am facing an issue with routing in my project where the home tab remains active even when I click on other tabs. I have tried adding routerLinkActiveOption as a solution, but it doesn't seem to be working for me. <ul class="nav nav-ta ...

htmlangulartypescriptangular-ui-bootstrap

Is a Text-Only View Possible with WebView?

Could someone help me figure out how to restrict a WebView to only load text in my WinRT XAML App? I am looking for a simpler solution than having to download the source and manually editing img tags. ...

htmlxamltextwebviewwindows-runtime

Javascript addClass and removeClass functions are not functioning as expected

Can you help me figure out why the icon still goes into the "startSharing" section even when it is turned off? In my html file, I have the following code for the icon: <div class="startSharing"></div> And in my javascript file, I have the fo ...

javascriptjqueryhtml

Enhance your website with Bootstrap 4 by separating text and images in your carousel

I've been struggling to create a slider similar to the one shown in the image. I attempted using the Bootstrap carousel, but ran into issues with inconsistent image sizes and the text on the left side jumping around before settling in its correct posi ...

cssbootstrap-4carousel

issues with conditional statement

I'm encountering an issue with the if statement not functioning as expected, and I can't seem to figure out why. The if condition always gets displayed regardless of the input. To troubleshoot, I initially used a temporary code snippet for the co ...

phphtml

The AngularJS framework is failing to disable the autocomplete feature for the input field with a password type

I have attempted to disable auto-complete for the password input, but it doesn't seem to be working. Below is a sample of my code: <form name="testfrm" ng-submit="test(testfrm)" autocomplete="off"> <input type="password" id="passwor ...

javascriptjqueryhtmlcssangularjs

Troubleshooting: Jquery Toggle Issue When Used with Adjacent Div Element

I've been puzzling over this issue for hours now. The intention of this code is to display a div, but it's just not cooperating. <div id="butbr"> <div id="sup_nav"> <div id="stup" class="bxt1"></div> <div id= ...

javascriptjqueryhtmlcssshow-hide

Difficulty in vertical alignment of inline-block elements

Greetings, I am currently working on creating a Resume in HTML. However, I seem to be facing an issue with the inline-block property as the two div elements that should be placed next to each other are not displaying as expected - one of them appears sligh ...

htmlcss

Assign a class to the checkbox of the first parent

I have a set of checkboxes generated using a for loop. I want the first checkbox to act as a parent, and all other checkboxes should act as children. When the parent checkbox is clicked, all child checkboxes should be checked. Although I have code to achi ...

jqueryhtmlcss

SQL Query: Change text color based on the result number retrieved

After executing my SQL SELECT statement, I want to display every record in a div using a While statement. I would like the divs to alternate in color, for example: Result 1 = white div Result 2 = grey div Result 3 = white div Result 4 = grey div. I am un ...

phpsqlcssselecthtml

Updating the image source attribute using Vue.js with TypeScript

Let's discuss an issue with the img tag: <img @error="replaceByDefaultImage" :src="urls.photos_base_url_small.jpg'"/> The replaceByDefaultImage function is defined as follows: replaceByDefaultImage(e: HTMLImageElement) ...

htmltypescriptimagevue.js

PHP - Extract Information from Table Upon Form Submission without User Input

I'm facing a challenge with my web form that includes a table allowing users to delete rows before submitting. Although there are no input fields in the table, I need to capture the data from these rows when the form is submitted. The issue is that th ...

javascriptphphtml

Can you create a dynamic visual display using HTML5 Canvas to draw lines in a circular pattern that react

I have successfully implemented drawing lines around a circle using the AudioContext API. However, I am facing an issue with the lineTo function, as the line only grows and does not shrink. My inspiration for this project comes from the audio visualizer fo ...

javascripthtmlreactjscanvas