Design featuring overlaying text on an image

Looking to add a triangle with text over an image using CSS? Here's a sample image for reference:

Here's what I have so far:

.image {
    background: url('../image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;

    & .text {
        position: absolute;
        background-color: #FFF;
        bottom: 0;
        right: 0;
        padding: 10px 20px;
    }
}

<div class="image">
    <span class="text">
        <p>Text here</p>
        <p>And here</p>
    </span>
</div>

How can the left side of the box be rotated or angled?

Thank you for any assistance!

css

Answer №1

To achieve the desired effect, you can utilize a pseudo element of the parent container. Simply apply the rotate() function followed by the translateY() method to position it in the bottom corner.

body {
  max-width: 450px;
}

.container {
  background: url("https://example.com/image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  padding-bottom: 100%;
}
.container .content {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 15px 25px;
}
.container::before {
  content: '';
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-60deg) translateY(80%);
}
<div class="container">
  <span class="content">
        <p>Your text here</p>
        <p>Add more text here</p>
    </span>
</div>

Answer №2

To create a triangle using linear gradient, adjust the padding values for top and left to ensure that the triangle is large enough to contain the text.

.image {
  width: 200px;
  height: 200px;
  background: url(http://lorempixel.com/200/200/animals/');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.text {
  position: absolute;
  background: linear-gradient(to bottom right, transparent 50%, white 51%);
  bottom: 0;
  right: 0;
  padding: 60px 0 0 60px;
  text-align: right;
  white-space: nowrap;
}
<div class="image">
  <span class="text">
        <p>Text goes here</p>
        <p>A longer piece of text</p>
    </span>
</div>

Answer №3

To create a triangle shape in the bottom right corner of your .image, you can utilize borders on the ::before and ::after pseudo-elements.

.image {
    height:300px;
    width:300px;
    background-image: url('http://lorempixel.com/300/300/');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.image::before,
.image::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

.image::before {
    border-width: 1.5em;
}

.image::after {
    border-width: 3.35em; /* increases triangle size */
    border-bottom-color: #fff;
    border-right-color: #fff;
}

.text {
    position:absolute; 
    bottom:0; 
    right:0; 
    z-index:1;
}

p {
    margin-top: 0px;
    margin-bottom: 0px;
}
<div class="image">
    <span class="text">
        <p>Your text here</p>
        <p>And more text here</p>
    </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

What could be causing my CSS navigation toggle button to malfunction?

My attempt at creating a toggle button for tablets and phones seems to be failing. Despite the javascript class being triggered when I click the toggle button, it is not functioning as expected... https://i.stack.imgur.com/j5BN8.png https://i.stack.imgur. ...

javascripthtmlcss

Turn off the background color box with a single click

Whenever I click on a header menu item, the background changes along with it. Is there a way to prevent this from happening? https://i.stack.imgur.com/p6bJ9.png Take a look here ...

csswordpress

When mousing over a subitem of the Image menu, ensure that the Image menu

Is there a way to prevent the image menu from reverting back to its original image when hovering over its subitems? I have 5 navigation menu items, but only one has a dropdown. Whenever I hover on the subitems of About Us, the image for About Us changes ba ...

htmlcssmenu

Extending an element beyond the boundaries of its container

I currently have 3 different divisions within the body of my document: a container, a parent, and a child element. My goal is to make the child element extend beyond its parent on the left side. However, when I try to achieve this by using position: ab ...

csscss-position

Switch up text using jQuery on css-tricks.com

I am having trouble with the code I found on a page about toggling text using jQuery from this link. Could someone please explain to me the significance of ':visible'? Thank you. Here is the fiddle link, and below is the code that I copied. Vi ...

jqueryhtmlcss

Eliminate screen flickering during initial page load

I've been developing a static website using NuxtJS where users can choose between dark mode and default CSS media query selectors. Here is the code snippet for achieving this: <template> <div class="container"> <vertical-nav /> ...

javascriptcssvue.jsdomnuxt.js

Is there a method to compel Chrome to enable subpixel rendering during a sluggish translation process?

Currently, I am in the process of slowly transitioning a background image (a picturesque view of space sliding gradually to the left). The issue arises when viewing this on Chrome as opposed to Firefox. In Chrome, there is a noticeable "jittery" effect due ...

javascriptcssgoogle-chrome

Adjusting the Bootstrap button block to match the width of the screen

Can anyone help me with this issue? My Bootstrap button is extending outside the screen and I'm not sure how to fix it. Here is the link to my plunker <div class="bigone"> <div class="mybar">Nav bar</div> <div class="m ...

cssbootstrap-4

The grid-column-end attribute is creating a gap in the layout

For the task at hand, my goal is to showcase the final 3 elements of a container in a horizontal alignment. In this setup, the first two items are allotted fixed space while the third element expands to fill the remaining columns. To accomplish this layou ...

htmlcsscss-grid

Protected Bootstrap Environment

Bootstrap is an amazing tool, but it tends to enforce too many opinions. The selectors used in its rules are quite broad, such as input or label. Is there a method to isolate Bootstrap's CSS so that it only impacts elements within a container with a ...

javascriptcsstwitter-bootstrap

Creating a carousel similar to the one on Skipperlimited's website can be achieved

I am working on a project and I would like to create a design similar to the one found at Specifically, I am interested in replicating the carousel of images and the rotating carousel within their logo. Can anyone provide guidance or suggestions on how to ...

jqueryhtmlcssbootstrap-4

Why are the Facebook like buttons not showing up with lazy loading enabled?

As I work on a project for my client, I encounter an issue with loading results onto the page. Initially, when the first 10 results are displayed, the facebook like button is perfectly rendered. However, upon clicking the bottom link to load 10 more resu ...

phphtmlcssfacebook

What could be causing the Navbar Collapse feature to malfunction in my Bootstrap setup?

Hey there, I'm facing an issue with the Bootstrap navbar collapse button not working. I've tried everything, followed all the steps in a tutorial, but still can't get it to function properly without altering the Signup and Login buttons. Ca ...

htmlcssbootstrap-5

The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving ...

javascripthtmlcss

Media query failing to activate

As I delve into utilizing media queries to adjust background images and hide content within a division tag when the screen size exceeds 640px, I'm encountering issues with the functionality. Being new to this concept, I can't shake off the feelin ...

htmlcssmedia-queries

Ways to adjust font sizes for different devices in Main storyboard for iOS development

Is there a way to adjust font size based on different devices? The current UI is optimized for iPhone 8, with a font size of 14. However, this causes some letters to not be visible on smaller screens of other phones. How can I solve this issue? Main.story ...

ioscssfontsstoryboard

Editing the app.js file can cause it to malfunction and stop working

As I work on designing a webpage for a construction company using a template, I face an issue with the js file named app.js. Whenever I make edits to the script, the entire HTML page loses its responsiveness as if the js file was never included in the firs ...

javascriptjqueryhtmlcss

The functionality of using variables in conjunction with the .insertAfter method appears to be

As a novice coder with limited English skills, I apologize in advance. Here is the CSS code snippet I am working with: #wrapper{ width: 200px; height: 300px; border: solid 1px #000; overflow: visible; white-space: nowrap; } .page{ ...

jquerycsshtmlvariablesinsertafter

Arranging the final item in the empty space above the div section using Flexbox

Kindly review this code for additional details. Take a look at the image above for a clearer understanding. On the right side of the image, you will notice that the last row contains two items and the second row has one empty slot. I need to rearrange one ...

cssflexbox

What is the best way to contain content within a container while still extending its background to full width in CSS?

I'm currently working on a design that resembles: https://i.sstatic.net/hc5kv.jpg In this design, the red lines represent the sides of the container. I have enclosed the content section within a container div as follows: .container { width: 1200px; ...

htmlcsscss-position