Generate an angled border for a div

Is there a way to create a slanted div using CSS without relying on borders, especially when the div will be placed over an image? Here is what I have so far:

<div class="thumbnail">
    <a href="#">
        <img class="img-responsive" src="banner.jpg">
        <h3 class="headline-badge">slanted div text</h3>        
    </a>
</div>

This is the relevant CSS:

.thumbnail img.img-responsive {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.headline-badge {
    color: #fff;
    margin-top: 0;
    padding: 2%;
    position: absolute; 
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: #000;
}

I am looking for a solution to create a responsive slant towards the top right side of the div without affecting the text. The slant angle should be around 45 degrees and only appear on the right-hand side.

If you have any ideas or examples on how to achieve this effect using CSS, please share them. The end result should resemble something like this:

http://jsfiddle.net/webtiki/yLu1sxmj/

Thank you for sharing the fiddle link, but I need to find a way to add text on top of the div while keeping the slant upwards and not downwards. Additionally, the solution provided made it hard to incorporate additional text as needed. Any suggestions would be greatly appreciated!

htmlcsscss-shapes

Answer №1

To create a slanted solid background for your element without affecting the text, you can utilize a skewed pseudo element. This technique allows for the transformation of the background while keeping the text intact.

By setting the transform origin property to skew the pseudo element from the right bottom corner and using overflow:hidden; to hide overflowing parts, you can achieve the desired slanted effect.

The pseudo element is positioned behind the content of the div with a negative z-index:

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

body {
  background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
  background-size: cover;
}
<div>slanted div text</div>
<div>
  slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>

Answer №2

To accomplish this task, you can make use of CSS clip-path (as well as -webkit-clip-path)

Check out an example here

In addition, I stumbled upon this useful tool for generating the necessary CSS code with minimal effort.

Answer №3

When considering adding a slant to a banner or creating a click area, it's advisable to follow the approach used by major websites like Amazon and Google. One effective method is to create a vector image designed with the desired slant and dimensions, then overlay it onto the designated section of the div. By setting the image as position:absolute with a z-index higher than other elements in the div, processing time can be reduced significantly. Additionally, utilizing cached images ensures quick loading similar to CSS without encountering cross-browser compatibility issues.

Furthermore, vector images are advantageous as they resize smoothly without losing quality, eliminating concerns about pixelation or distortion when adjusting the size.

Answer №4

**Using the -webkit-linear-gradient property to create a background with diagonal gradient from rgba(113, 182, 46, .6) to rgba(0, 0, 0, 0).**

Answer №5

The issue with the solution provided is that it may not function properly if there is an image set as the background of the parent element. To address this, I opted to utilize an inline SVG background instead.

Here is how you can implement this:

<div class="parent">
  <div class="slanted">
     Add your content here
  </div>
</div>

To style it accordingly, use the following CSS:

.parent {
          background-image: url('http://lorempixel.com/600/350');
          background-size: cover;
          background-position: center center;
          padding: 100px;
 }

.slanted {
            color: white;
            background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg'  preserveAspectRatio='none'><polygon points='0,300 0,0 150,0 300,300' width='100%' height='100%' style='fill:blue;'/></svg>");
            background-size: contain;
            width: 30%;
            font-size: 2em;
            padding: 4px 40px;
 }

If necessary, adjust the dimensions of the SVG and the element to achieve the desired appearance. The original method might suffice for most scenarios but may fall short when dealing with a parent element featuring an image background.

For more information on using SVGs, check out these resources:

https://www.w3schools.com/graphics/svg_intro.asp

https://developer.mozilla.org/en-US/docs/Web/SVG

https://www.w3schools.com/graphics/svg_polygon.asp

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

Issues arising with the functionality of CSS media queries when used in conjunction with the

I created a webpage that is functioning well and responsive on its own. However, when I integrate the same files with the Spring framework, the responsiveness of the webpage seems to be lost. To ensure the responsiveness of the Spring webpage, I tested it ...

javahtmlcssspringjsp

Stacking images with CSS styling

I'm currently working on creating a CSS design template. Within this project, I have two images named imageOne and imageTwo. Both images are styled with position: relative, as setting one to position: absolute would compromise the responsiveness of ...

htmlcsstwitter-bootstrapresponsive-design

Is the utilization of a PHP snippet for translated content considered a beneficial practice? Are there ways to enhance or simplify this process further?

I am in the process of creating a website that will display translated content using different gTLDs. For example, example.com, example.fr, example.de. The plan is to have all these domains redirect to the same content on one server. Then, based on the gT ...

phphtmllanguage-translation

Learn how to display only certain elements when triggered by the click of another

I have developed a tab system where each tab contains a unique set of questions and answers. The structure of the tabs is exactly as I envisioned, but I am facing challenges with toggling the display of answers when their respective questions are clicked. ...

javascriptjqueryhtml

Adding input values to a jQuery Ajax POST request

I am currently attempting to send form values to a remote API using AJAX. The necessary information I require from the HTML form element includes the author, string, false, and true. At the moment, I have hard-coded some values but... function sendData ...

javascriptjqueryhtmlajax

Troubleshooting CSS font-variation-settings not functioning

Exploring the possibilities of variable fonts has been my latest project. In my initial test, I played around with the font-variation-settings directive, but unfortunately, it doesn't seem to be functioning properly. This was evident on both Codepen: ...

css

Exploring nested selection with css and utilizing the ::focus pseudo class

Is it possible, using CSS, to target the helpTextInvalid class when the div element with the selectize-input class is in focus? <html> <head> <body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/lib ...

javascriptcssfocus

I must modify the HTML code so that it can generate a random response to a webhook, rather than providing a fixed reply

Currently working on some code where I'm trying to send a random message to a webhook instead of a static one. I think I need to use an array or something similar for this. Any help would be greatly appreciated! <meta charset="UTF-8"> ...

htmlarrayswebhooks

A comprehensive guide on personalizing Bootstrap 4 tooltips to suit your specific needs

I would like to customize the tooltip in Bootstrap 4 based on the screenshot provided below: https://i.stack.imgur.com/wg4Wu.jpg <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta chars ...

javascriptjquerycssbootstrap-4

I am looking to create a button with a transparent border within a white background container

I am trying to achieve a button border effect similar to the one in the image provided. I want to create a div with a white background color, and inside that div, I need to add a button with a 15px margin or padding while making it transparent. <div cl ...

htmlcss

Creating this design using only HTML and CSS is possible by following these steps

I attempted to create this design using only HTML and CSS but unfortunately couldn't achieve it. Can anyone provide me with some assistance? Thank you in advance Check out the image on imgur.com ...

htmlcss

Is there a way to incorporate pagination into my index.html file?

Below are the codes that are currently working fine: #views.py class IndexView(generic.ListView): template_name = 'index.html' context_object_name = 'home_list' queryset = Song.objects.all() paginate_by = 1 def get_ ...

pythonhtmldjangopaginationview

The ability to use the backspace and Ctrl + c (Copy) functions is restricted in input fields on FireFox

I have a form with input fields designed using semantic UI. I need the input field to only accept numbers, remove spaces, and allow copying from it using ctrl +c. After some investigation, I found this jQuery code that seems to satisfy my requirements per ...

jqueryhtmlregexfrontendsemantic-ui

Checking Twitter follower count using Jquery and JSON

Here is a script that counts twitter followers:. However, it seems to be displaying the list of followers twice. I would like some assistance in getting just the follower count stats for the array elements. Thank you! echo "<div id='twitter'& ...

phpjqueryhtmljson

What could be causing my dropdown links to malfunction on the desktop version?

I've been developing a responsive website and encountering an issue. In desktop view, the icon on the far right (known as "dropdown-btn") is supposed to activate a dropdown menu with contact links. However, for some unknown reason, the links are not f ...

javascripthtmlcss

how to show an error in a modal window when encountering an error

Using Blazor and Blazorstrap, typically when the server disconnects, an "Error" message is displayed. However, with the BsModal from Blazorstrap, it appears in the background layer, making it unresponsive. How can this be fixed? Is it possible to close the ...

javascriptcssbootstrap-4blazor-server-side

How to create collapsible and expandable HTML table columns using the <th> element?

I've searched far and wide for a solution to this conundrum and come up empty-handed. I have a HTML table with a total of 13 columns. The 7th column, labeled Number of Tops, is a sum of columns 8-11: # Short-sleeve, # Long-sleeve, # Sweaters, # Jacket ...

javascripthtmlcsshtml-tabledatatables

Use jQuery to switch the class of the designated DIV in the showcasing slider

Check out this jQuery slider example where I have two Divs - DIV ONE and DIV TWO. Can you help me figure out how to: 1) Automatically change the class of DIV ONE from "test" to "testc" when Slide 1 is displayed by the slider. 2) Automatically update DIV ...

javascriptjqueryhtmlcss

Why isn't a password appearing in the "generated-password" div from the password generator?

The function toIncludeCharacters() appears to be functioning correctly as it returns lowercase letters upon upload, but generatePassword() is currently producing a blank output. After clicking the "Generate Password" button, three blank outputs are return ...

javascripthtmlbootstrap-5password-generator

What is the best way to extract clean text from HTML using JavaScript?

I am struggling with the code below in my HTML file: function hideContent(){ // Need help with this part! } <input type="button" onclick="hideContent()" value="Hide Content"/> <p id='txt'> <span class="A">I am</span> ...

javascripthtml