Adjust the ribbon's width without altering its placement in order to make it fit snugly inside the box

Is there a way to decrease the width of the ribbon while keeping its position intact?

I need some guidance on what I might be doing wrong.

.ribbon-content {
  position: relative;
}

.ribbon-content>[class*=ribbon] {
  position: absolute;
  z-index: 2000;
  line-height: 2em;
  display: block;
  width: 10em;
  height: 2.5em;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ribbon-content>[class*=ribbon]::before,
.ribbon-content>[class*=ribbon]::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-clip-path: polygon(2em 0, 8em 0, 10em 2em, 10em 2.5em, 9.5em 2em, 0.5em 2em, 0 2.5em, 0 2em);
  clip-path: polygon(2em 0, 8em 0, 10em 2em, 10em 2.5em, 9.5em 2em, 0.5em 2em, 0 2.5em, 0 2em);
}

.ribbon-content>[class*=ribbon]::before {
  top: 0.1em;
  height: 1.8em;
  border: 1px dotted rgba(0, 0, 0, 0.3);
  border-left: none;
  border-right: none;
}

.ribbon-content>[class*=ribbon]::after {
  z-index: -1;
  background-color: #ff6347;
  border-bottom: 0.5em solid #505050;
  transition: background-color 0.2s ease-in-out;
}

.ribbon-content>.ribbon-top-left {
  top: 0;
  left: 0;
  transform: translate(-3.85em, 1.4em) rotate(-45deg);
  color: #fff;
  font-size: 0.65rem;
}

.box {
  width: 100%;
  max-width: 20em;
  min-height: 10em;
  margin: 2em;
  background-color: #333;
}
<div class="box ribbon-content"><span class="ribbon-top-left" href="#">NEW</span></div>

htmlcss

Answer №1

This answer consists of two parts, with the second part expanding on the first.

To transform a span into a div and eliminate the display:block property, a block needs to be adjusted.

Optimize the positioning of the ribbon by adjusting the following properties: top: 0.75em; left: 0.5em;

Unnecessary properties like position: relative; for the box and position: absolute; for the ribbon should be removed.

Ensure the box is structured as a border box with zero margin or padding:

      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-size: 16px;
    }

Although specifying font size is not imperative due to modern browser defaults, it adds specificity.

Adjust the ribbon margin with margin-left: 1.5em; for better visual alignment with the box.

Remove the /* top: 0.1em; height: 1.8em;*/ as it serves no purpose.

.ribbon-content {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

.ribbon-content>[class*=ribbon] {
  margin-left: 1.5em;
  z-index: 2000;
  line-height: 2em;
  width: 10em;
  height: 2.5em;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ribbon-content>[class*=ribbon]::before,
.ribbon-content>[class*=ribbon]::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-clip-path: polygon(2em 0, 8em 0, 10em 2em, 10em 2.5em, 9.5em 2em, 0.5em 2em, 0 2.5em, 0 2em);
  clip-path: polygon(2em 0, 8em 0, 10em 2em, 10em 2.5em, 9.5em 2em, 0.5em 2em, 0 2.5em, 0 2em);
}

.ribbon-content>[class*=ribbon]::before {
  /*  top: 0.1em;
  height: 1.8em;*/
  border: 1px dotted rgba(0, 0, 0, 0.3);
  border-left: none;
  border-right: none;
}

.ribbon-content>[class*=ribbon]::after {
  z-index: -1;
  background-color: #ff6347;
  border-bottom: 0.5em solid #505050;
  transition: background-color 0.2s ease-in-out;
}

.ribbon-content>.ribbon-top-left {
  top: 0.75em;
  left: 0.5em;
  transform: translate(-3.85em, 1.4em) rotate(-45deg);
  color: #fff;
  font-size: 0.65rem;
}

.box {
  width: 100%;
  max-width: 20em;
  min-height: 10em;
  /* margin: 2em; can be anything since this is BOTH elements contained */
  background-color: #333;
}
<div class="box ribbon-content">
  <div class="ribbon-top-left" href="#">NEW</div>
</div>

After implementing the above changes, adjust the ribbon font size accordingly:

If needed, you can also wrap the text to resize it while modifying the ribbon height and left margin as follows:

.ribbon-content>.ribbon-top-left {
  font-size: 0.5rem;
  top: 0.75em;
  left: 0.5em;
  transform: translate(-3.85em, 1.4em) rotate(-45deg);
  color: #fff;
}


.ribbon-content {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

.ribbon-content>[class*=ribbon] {
  margin-left: 1.75em;
  z-index: 2000;
  width: 10em;
  height: 3em;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ribbon-content>[class*=ribbon]::before,
.ribbon-content>[class*=ribbon]::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-clip-path: polygon(2em 0, 8em 0, 10em 2em, 10em 2em, 9.5em 2em, 0.5em 2em, 0 2.5em, 0 2em);
  clip-path: polygon(2em 0, 8em 0, 10em 2em, 10em 2.5em, 9.5em 2em, 0.5em 2em, 0 2.5em, 0 2em);
}

.ribbon-content>[class*=ribbon]::before {
  border: 1px dotted rgba(0, 0, 0, 0.3);
  border-left: none;
  border-right: none;
}

.ribbon-content>[class*=ribbon]::after {
  z-index: -1;
  background-color: #ff6347;
  border-bottom: 0.5em solid #505050;
  transition: background-color 0.2s ease-in-out;
}

.ribbon-content>.ribbon-top-left {
  font-size: 0.5rem;
  top: 0.75em;
  left: 0.5em;
  transform: translate(-3.85em, 1.4em) rotate(-45deg);
  color: #fff;
}

.ribbon-content>.ribbon-top-left .just-text {
  font-size: 1.5em;
  height: 2.5em;
}

.box {
  width: 100%;
  max-width: 20em;
  min-height: 10em;
  /* margin: 2em; can be anything since this is BOTH elements contained */
  background-color: #333;
}
<div class="box ribbon-content">
  <div class="ribbon-top-left" href="#"><span class="just-text">NEW</span></div>
</div>

Answer №2

The correlation between the width, the transform property, and the parameter for clip-path emphasizes the importance of utilizing CSS custom properties and calc for seamless scaling.

I have implemented the clip-path for you, but the translation aspect remains a task for you to accomplish. It may require some geometric calculations to achieve. Here is the code:

.ribbon-content {
  position: relative;
  --width: 5em;
}

.ribbon-content>[class*=ribbon] {
  position: absolute;
  z-index: 2000;
  line-height: 2em;
  display: block;
  width: var(--width);
  height: 2.5em;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ribbon-content>[class*=ribbon]::before,
.ribbon-content>[class*=ribbon]::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-clip-path: polygon(
    calc(var(--width) * 0.2) 0,
    calc(var(--width) * 0.8) 0,
    calc(var(--width)) 2em, 
    calc(var(--width)) 2.5em, 
    calc(var(--width) * 0.95) 2em, 
    calc(var(--width) * 0.05) 2em, 
    0 2.5em, 
    0 2em);
  clip-path: polygon(
    calc(var(--width) * 0.2) 0, 
    calc(var(--width) * 0.8) 0, 
    calc(var(--width)) 2em, 
    calc(var(--width)) 2.5em, 
    calc(var(--width) * 0.95) 2em, 
    calc(var(--width) * 0.05) 2em, 
    0 2.5em, 
    0 2em);
}

.ribbon-content>[class*=ribbon]::before {
  top: 0.1em;
  height: 1.8em;
  border: 1px dotted rgba(0, 0, 0, 0.3);
  border-left: none;
  border-right: none;
}

.ribbon-content>[class*=ribbon]::after {
  z-index: -1;
  background-color: #ff6347;
  border-bottom: 0.5em solid #505050;
}

.ribbon-content>.ribbon-top-left {
  top: 0;
  left: 0;
  /* you'd need to do a bit of geometry to make this work consistently */
  transform: translate(calc(var(--width) * -0.3), 0) rotate(-45deg);
  color: #fff;
  font-size: 0.65rem;
}

.box {
  width: 100%;
  max-width: 20em;
  min-height: 10em;
  margin: 2em;
  background-color: #333;
}
<div class="box ribbon-content"><span class="ribbon-top-left" href="#">NEW</span></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

Is there a way to determine the file size for uploading without using activexobject?

Can the file size of an uploading file be determined using Javascript without requiring an ActiveX object? The solution should work across all web browsers. ...

javascripthtmlfile-uploadfilesize

Padding causing links to break exclusively in Firefox

As a seasoned front-end developer, I recently encountered an issue that has stumped me. My main navigation bar has extensive right padding to ensure the hover dropdowns have ample space. The problem seems to be in this piece of code: HTML: <div id="h ...

htmlcssfirefox

InvalidSelectorError: The specified selector is not valid //button[contains(., 'buttonText')] while running JavaScript code

Here's an example of HTML code that I am working with: <button id="toolbar-item-17-update-id" type="submit" name="action" value="update" class="button-action-update btn btn-secondary"> Ed ...

javascripthtmlcss

Incorporating list view separators using JQuery Mobile

I recently started using the Jquery Mobile Flat UI Theme and I'm really impressed. However, I would like to enhance it by adding a separator between each listview. Here is my current listview: Can someone please advise me on which code I need to add ...

jquerycsslistviewjquery-mobile

Insufficient column height when using CSS flex-grow property

I am facing an issue with my 3 flex columns that have varying text lengths, resulting in uneven heights. I have tried using flex-grow: 1; to make them match in height, but it does not seem to be working as intended. Can someone please help me identify what ...

cssvue.jssassflexbox

Utilizing JQUERY to modify the 'top' attribute upon clicking

I am attempting to implement a vertical scroller using jQuery, but I'm encountering difficulties with my code. function scrolldown() { var newtop = $('.scroll-content').css('top') + '250'; $('.scroll ...

jquerycss

Using the HTML Style Tag in Android Development

After doing some research on articles and websites, I discovered that it is possible to create an HTML file and then display it using Android WebView. I referenced the following: Android WebView (WebKit) Tutorial Understanding User Interface in Android ...

htmlandroidandroid-widgetandroid-webview

Display images in Django using the src attribute pulled from a Python list

I am currently working on displaying a collection of images on my website. I have compiled a list of sources for each image and created a loop in the HTML file to iterate through them. Here is a snippet of the HTML body: <body> <div class="co ...

pythonhtmldjango

Unable to save the user's identification in the session

I am in the process of retrieving the user ID of a logged-in user and storing it in the session. This way, when a user submits something, I can include their user ID in the submission to the database. My login page is quite rudimentary, so any guidance wou ...

phphtmlmysqlsession-variables

What is the process for adding a counter variable to a field within a Twig file?

I'm working on a Twig file where I need to create a table and populate it with data using a loop. The issue is that all my field names are the same, so I want to add a counter variable to differentiate them. How can I achieve this? Below is the code ...

htmlsymfonyfor-looptwig

Enhancing Images with Dynamic Captions Using JQuery

I have created a code to add image captions to different div blocks, and it works as intended. However, I am looking for ways to optimize the code and make it shorter. If you have any advice on how to improve it, please let me know! Thank you in advance. ...

jqueryhtmlcss

Position the checkbox to the left of the label

I currently have a checkbox with ripple effects. The label text is displayed before the checkbox in the code. However, I'd like to change the order so that the checkbox comes before the label text. Occasionally, the entire div expands and contracts. ...

htmlcss

Tips for eliminating the pesky "ghost" line that appears in your coded HTML email

Check out this Sample Code: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <title></title> & ...

htmlcssemailhtml-tablehtml-email

Mouse position-based scrolling that preserves click events in the forefront while scrolling

Within a larger div, I have a very wide inner div that scrolls left and right based on the position of the mouse. I found the code for this from an answer at There are two transparent divs above everything else, which capture the mouse position to determ ...

javascriptjqueryhtmlcss

When you open the link in a new tab, the form submission does not occur

I am currently working on a form that includes a JavaScript submit function. Within the form, there are 3 anchor tags that I want to use to set different values to a hidden parameter when submitted based on the link clicked. Although the form submission w ...

javascripthtmlformsform-submitnew-window

What is the best way to format the JQGrid table for better

Is there a way to indent the table in this example and create white space on the side of the rows and header? I want a white margin on the left of everything below "Stackoverflow example". I'm hoping to achieve this using only CSS. Below is the code ...

cssjqgrid

Is it possible to make a div's width 100% until a certain point, and then change it to 30% beyond that breakpoint?

I am trying to work with a div element <body style="width: 100vw; height: 100vh"> <div id="containerDiv"> <div id="canvasDiv" /> </div> </body> My goal is to adjust the width of canvasDiv based on the screen size. ...

htmlcssbootstrap-4bootstrap-5

Create a single line of content for a carousel display

Seeking a solution where I can have a container that slides sideways without stacking in rows, I have exhaustively searched for answers using different keywords like single row, inline, flexbox, and grid but to no avail. Any assistance will be highly appre ...

javascriptcssinline

I'm experiencing an issue with my dropdownlist not triggering the onchange event in AngularJS

I am a beginner in the world of AngularJS and I am trying to extract the values OnChange from a dropdown list. Here is the code that I have experimented with: <div> <select ng-controller="UserSelection as User" ng-model="User.UserSelected" n ...

javascripthtmlasp.netangularjs

What is the correct xpath format for the options that are listed?

Is there a way to choose an option from the following HTML tag without using the traditional select tag? How can I generate a dynamic xpath for this particular element? <span class="select2-selection__rendered" id="select2-ContentPlaceHolder1_signup_ ...

javahtmlselenium-webdriver