Creating a triangle shape in the upper right corner with text using CSS

Starting my journey in HTML and CSS.

This link shows how I want to use the code:

.container {
  width: 250px;
  height: 250px;
  position:relative;
  background-color:grey;
}

.corner {
  width: 0; 
  height: 0; 
  border-top: 150px solid #ffcc00;
  border-bottom: 150px solid transparent;
  border-right: 150px solid transparent;
}

.corner span {
  position:absolute;
  top: 35px;
  width: 100px;
  left: 5px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(-45deg);
  display:block;
}
<div class="container">
  <div class="corner"><span>20% Special Offer</span></div>
</div>

However, I aim to position the triangle at the top right instead of its original placement.

Here's what I attempted:

.corner {
  width: 0; 
  height: 0; 
  border-top: 150px solid transparent;
  border-bottom: 150px solid transparent;
  border-left: 150px solid transparent;
}

.corner span {
  position:absolute;
  top: 35px;
  width: 100px;
  left: 5px;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  transform: rotate(45deg);
  display:block;
}

Although it functions, the text positioning is off...

Your assistance is greatly appreciated. Thank you.

htmlcss

Answer №1

To ensure the triangle lines up on the right side, you will need to make adjustments as it naturally aligns to the left. Merely rotating it in the opposite direction won't suffice; absolute positioning is necessary for proper alignment. Additionally, modifications must be made to position the text correctly:

.container {
  width: 250px;
  height: 250px;
  position:relative;
  background-color:grey;
}

.corner {
  width: 0;
  height: 0;
  border-top: 150px solid #ffcc00;
  border-bottom: 150px solid transparent;
  border-left: 150px solid transparent;
  position:absolute;
  right:0;
}

.corner span {
  position:absolute;
  top: -110px;
  width: 100px;
  left: -100px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(45deg);
  display:block;
}
<div class="container">
  <div class="corner"><span>20% Special Offer</span></div>
</div>

Answer №2

Check out this awesome resource on CSS shapes:

No need for absolute positioning with this code:

.container {
  width: 250px;
  height: 250px;
  position:relative;
  background-color:grey;
}

.corner {
  width: 0; 
  height: 0; 
  border-top: 150px solid #ffcc00;
  border-left: 150px solid transparent;
  right:0;
  margin-left:auto;
}

.corner span {
  position:absolute;
  top: 35px;
  width: 100px;
  right: 5px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(45deg);
  display:block;
}
<div class="container">
  <div class="corner"><span>20% Special Offer</span></div>
</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

Can the parent document interact with Shadow DOM elements?

When it comes to user-created shadow DOM elements, this question focuses more on accessibility using the date input type: For instance, let's say there is a date input on a webpage. After some editing, the shadow DOM markup for this element (in Chrom ...

javascripthtmlweb-componentshadow-dom

How to align Font Awesome icons inside `<span>` vertically with each other

Trying to vertically align multiple font awesome icons: ############################# icon icon icon icon icon icon ############################# <div class="announcement-card-body modal-body card border-0"> <span class="info fa fa-info- ...

htmlcssfont-awesome

What steps can I take to modify the class of a button once it has been clicked using JQuery?

Currently, I am experimenting with Jquery to dynamically change the classes of bootstrap buttons when they are clicked. However, I have encountered a limitation while using toggleClass. The issue is that I am only able to toggle between two classes, whic ...

javascriptjquerycssbootstrap-4

Modify button text when hovered over

Is it possible to modify the text color of "Contacte-nos" on hover? .popmake-contacte-nos { background-color: #fffff7; /* Green */ border: none; color: black; font-weight: bold; padding: 15px 32px; text-align: center; text-decoration: n ...

htmlcssonhover

passing a PHP variable into an HTML input field

Recently, I've encountered a problem where I need to transfer PHP variables to HTML input fields. echo $ManuellTagnavnMain; for ($n = 0; $n < 6; $n++) { print_r(++$ManuellTagnavnMain.PHP_EOL); } I'm looking for a way to pass these values ...

javascriptphphtml

Difficulty with Angular JS` ng-repeat functionality

I attempted to create a sample similar to the ones found on https://angularjs.org/ Here is the JS fiddle I put together. Could someone provide assistance? What seems to be the issue? The HTML code is as follows: <h2> To Do </h2> <div ng- ...

javascripthtmlangularjs

Tips for targeting a specific set of elements in codeBehind within Web Forms without creating an additional wrapper element

In my Webform page, I have a html form containing fields for customer data and product data, as well as other miscellaneous fields. I am facing the challenge of needing to hide either the group of product fields or customer fields during PageLoad or other ...

htmlcss.netbootstrap-4webforms

a graphical representation of data organized in tabular form using

I am trying to develop a game where I need to generate a map using PHP. The goal is to create 100 table boxes in a specific pattern, but so far my attempts have not been successful... $field = 100; echo "<table border='3px' dir='ltr&apos ...

phphtmlcss

Steps for importing selenium web elements:

Can all of these ... tags be extracted simultaneously? I aim to retrieve every ... from that particular webpage! Web address: 'https://school.programmers.co.kr/learn/challenges?order=recent&page=1' ...

pythonhtmlselenium-webdriverweb-scrapingelement

Change the color of the border to match the background color

I have a parent container with a unique background color. Inside the parent container, there is an unordered list (ul) with multiple list items (li), each having a distinct color and a brighter border color. Now, I am looking to extract the border color of ...

javascriptjqueryhtmlcss

How can I ensure that my style.scss file effectively interacts with my stylesheet by including imports for "variables", "globals", and "header"?

Currently, I am in the process of learning how to utilize Sass and JavaScript through VS Code. Within my project structure, I have an "app" folder where my js folder resides containing script.js, as well as a scss folder holding _globals.scss, _header.scss ...

htmlstylesnav

Align the position of two divs with matching IDs (#thumb-1 equals #project-1) using JavaScript or jQuery, but without the use of jQuery UI

I am currently working on creating a portfolio gallery and have put together the following HTML structure: <article class="work-gallery"> <ul> <li id="project-1"><img src="http://placehold.it/50x00"></li> ...

javascriptjqueryhtmlcssmatch

Discovering components with identical html attributes in Selenium

I am currently developing a web crawler using Python 3.8. My goal is to convert the table below into a pandas dataframe using Selenium, Pandas, and BeautifulSoup. <table class="no_border_top" width="95%" align="center"> ...

pythonhtmlselenium-webdriver

Basic Hover Effect in Javascript

Looking at this snippet of HTML: <div id="site-header-inner"> <div id="header-logo"> <?php echo wp_get_attachment_image(get_field('header_logo','options'),'full'); ?> </div> <div id= ...

javascriptjqueryhtmlhoverjquery-hover

issue with a non-functional sticky sidebar within a Tailwind post

I am trying to create a layout similar to this website. One of the key features I want to replicate is the sidebar that follows you as you scroll. Here is the code I have, but unfortunately, I can't seem to get it to work: <template> <di ...

cssvue.jsnuxt.jstailwind-css

Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

I'm currently in the process of applying for an Internship through this Internship Link One thing that caught my attention right away is the issue with uploading or pasting a cover letter. When attempting to upload or paste a cover letter, it redirec ...

javascripthtmlcssformsweb-inspector

How can I show the localStorage value in an HTML5 template using Angular2?

I have two keys stored in localStorage and I want to display one of them on my template. I'm having trouble accessing these values. I even created an interface specifically for storing the value of the currentUser key from localStorage. How should I g ...

htmlangularlocal-storageangular2-forms

Extension for Chrome that switches between active and inactive modes

I have been attempting to create an extension that can toggle the functionality of another specific extension on and off. Despite numerous attempts, I have not been able to find a solution that works effectively. Essentially, my extension displays a popup ...

javascripthtmlgoogle-chromegoogle-chrome-extensiontoggle

Tips for altering the text color of the highlighted row in a Material UI table

Trying to modify the color of the row text and the background color when selected. I have managed to adjust the background color, but I am encountering difficulty changing the text color. <TableRow className={classes.tableBody} > tab ...

cssreactjsmaterial-uifrontend

What is the process for incorporating ejs into the source attribute of an image element?

Code Snippet: <img class="card-img-top" alt="..."><%= articles.image %><img> Server Setup: const express = require('express') const app = express() const router = require('./routes/article') app ...

javascripthtmlnode.jsejs