Styling CSS shape in front of a div

Having trouble adding an irregular shape before a div.

I'm looking to achieve the effect shown in this image:

However, I want this effect to cover the entire content of the div, not just the left or bottom. I attempted to use CSS arrows created with borders, but it didn't produce the desired outcome.

Would it be better to use borders in combination with transparent color and ::before, ::after pseudo elements, or the background-clip property?

Here is my HTML structure

.wrapper::before {
  display: block;
  height: 0px;
  width: 0px;
  border-left: 5px solid transparent;
  border-right: 650px solid transparent;
  border-bottom: 50px solid black;
}
.content {
  background-color: #f2f2f2;
  box-sizing: border-box;
  color: #000;
  text-transform: uppercase;
}
<div class="wrapper">
  <div class="content">
    Content
  </div>
</div>

Is there a way to combine ::after and ::before pseudo-elements to achieve this effect for the entire div?

htmlcss

Answer №1

The unique shape of this design presents a challenge, but one possible solution could involve utilizing the border-image property. If the blue background can be approximated with a rectangular shape, you may consider creating it using a single pseudo-element that incorporates skew and rotation transforms, like so:

.wrapper {
  padding: 50px;
  position: relative;
}
.content {
    background-color: #f2f2f2;
    box-sizing: border-box;
    color: #000;
    text-transform: uppercase;
    width: 300px;
    height: 200px;
    position: relative;
    z-index: 3;
    text-align: center;
    line-height: 200px;
}
.wrapper::before {
  content: '';
  display: block;
  background: rgb(145,205,239);
  width: 330px;
  height: 230px;
  position: absolute;
  z-index: 1;
  margin: -15px;
  transform: rotate(-1deg) skew(-5deg, -3deg);
}
<div class="wrapper">
    <div class="content">
CONTENT
    </div>
</div>

Answer №2

Feel free to use this example for your layout and customize it with your own code.

.content {
  background-color: #f2f2f2;
  box-sizing: border-box;
  color: #000;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  transform: skew(3deg, 5deg);
  -webkit-transform: skew(3deg, 5deg);
  -moz-transform: skew(3deg, 5deg);
  -o-transform: skew(3deg, 5deg);
  -ms-transform: skew(3deg, 5deg);
  position: relative;  
}
.wrapper {
  width: 400px;
  height: 222px;
  margin: 50px;
  padding: 25px 10px;
  background-color: blue;
  transform: skew(-3deg, -5deg);
  -webkit-transform: skew(-3deg, -5deg);
  -moz-transform: skew(-3deg, -5deg);
  -o-transform: skew(-3deg, -5deg);
  -ms-transform: skew(-3deg, -5deg);
  box-sizing: border-box;
}
.content-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="content">
        <p class="content-text">Content</p>
      </div>
    </div>
  </body>
</html>

Answer №3

  1. <div class="wrapper"> is not necessary in this scenario.
  2. The styling used includes 
    transform: scale(1.1, 1.18) skew(-4deg,-1.5deg)
    .

.content {
  background-color: #f2f2f2;
  color: #000;
  font-family: Impact, "Trebuchet MS", sans-serif;
  text-transform: uppercase;

  float: left;
  margin: 40px;
  position: relative;

  width: 360px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}

.content::before {
  content: '';
  background: #91cdef;
  display: block;
  width: 360px;
  height: 180px;

  position: absolute;
  transform: scale(1.1, 1.18) skew(-4deg,-1.5deg);
  z-index: -1;
}

img {
  float: left;
  margin: 19px;
}  
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>

<img src="https://i.sstatic.net/9vJ92.png" alt="">

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

JQuery Challenge: Solving Dynamic Modal Issues

I'm in the process of creating a webpage that features multiple divs, each with its own unique image and title. Within each div, there's a button that, when clicked, should grab the specific image and title and display them in a modal. However, I ...

javascriptjqueryhtmltwitter-bootstrap

The production build for Angular 9 Keyvalues pipe fails to compile

After successfully running my app on the development server with ng serve, I encountered a failure when trying to build it for production. The error message that popped up was: ERROR in src/app/leaderboard/leaderboard.component.html(9,17): Argument of typ ...

htmlangulartypescriptangular-pipe

"Bootstrap - creating a dynamic effect with a repeating pattern overlay and vibrant background color in

I'm having trouble adding a repeating background image to my jumbotron that already has a rebecca-purple background color. I've tried multiple approaches, but can't seem to get it right. Here's the code snippet I'm working with: . ...

htmlcsstwitter-bootstrap

Using Javascript and HTML5 Canvas to retrieve dimensions of selected objects

I have a canvas with an image containing colored squares. I want to be able to click on a square and retrieve its dimensions in pixels. For instance, clicking on a red square with a yellow border should return 24 X 100. I've come across some code that ...

javascripthtmlcanvas

Is there a way to prevent tags from wrapping and showcase them all in a single line when utilizing the jQuery select2 plugin?

I have a requirement to prevent tags from wrapping and instead display them in a single line using the jQuery TagIt plugin. Check out my preview: https://i.stack.imgur.com/lYhsi.png My goal is to have all the tags displayed on a single line without wra ...

javascripthtmljquerycssjquery-select2

Using Data URIs can negatively impact the loading speed of a webpage

I created a custom script to replace all inline images with data URIs in order to minimize http requests and speed up loading times on mobile devices. Surprisingly, I noticed a decrease in loading speed. Could it be because the HTML file was larger (aroun ...

htmlcssperformancedata-uri

Displaying JavaScript Countdown in PHP Table

I have a database table with multiple fields and I am looking to create a countdown using the integer value from one of the fields (in minutes). How can I loop through and display the countdown for each row in a PHP table utilizing these values, with the a ...

javascriptphphtmldatabase

Can you explain the intended function of .reference in the CSS code provided?

Currently delving into some sample HTML from codrops. I came across the following CSS styling. After scouring the web, it seems others have used span.reference, but I can't seem to grasp the purpose of .reference. Any insights would be much appreciat ...

cssmenu

Struggling to transfer data into MySQL database with AJAX and PHP

I am attempting to store user-input text from an input field into a MySQL database using Ajax and PHP. The concept is to input the text, click 'display', and then retrieve it from the database to display on the page. Here's a snippet of the ...

javascriptphphtmlajax

Interested in learning how to code games using JavaScript?

Hi everyone, I'm currently exploring the world of Javascript and have been tasked with completing a game for a class project. The game involves a truck that must catch falling kiwis while only being able to move left or right. A timer is set for two m ...

javascripthtml

JavaScript - Clear the localStorage when closing the final tab of a website

Currently, I am working with AngularJS and utilizing $window.localStorage to store the username of a logged-in user. Since localStorage needs to be explicitly deleted, I have implemented an event listener for $(window).on('unload', function(){}) ...

javascriptjqueryangularjshtmltabs

What is the best way to divide my HTML page in half?

My goal is to display two maps side by side, one on the right and the other on the left. However, when I try to implement this, one map appears on top of the other. I believe that CSS positioning can help me achieve the desired layout, but as a beginner in ...

javascripthtmlcssgoogle-maps-api-2

What is the best way for me to automatically square a number by simply clicking a button?

How do I create a functionality that multiplies a number by itself when a specific button is clicked? I want this operation to only occur when the equals button is pressed. I have been attempting to set this up for over an hour without success. My current ...

javascripthtmlcalculatorcalc

Hiding loading spinner in Ionic 2 upon iframe completion

I need to embed an external webpage in my app using an iframe. I have successfully implemented a loading animation while the iframe is loading, but I am unsure how to hide the animation once the iframe content has loaded. Unfortunately, I am unable to edit ...

htmlangulariframetypescriptionic-framework

Changing the color of the collapsed icon for accordion buttons in Bootstrap 5

I've been attempting to alter the color of Bootstrap 5's accordion's "accordion-button" when it's collapsed. I tested the following code, but it only changes the background and not the icon color of the button. .accordion-but ...

cssbootstrap-5bootstrap-icons

The image has max-height within a max-height container inside a fixed-height container

Here's the scenario: Can an image's max-height property be made to respect the fixed height of an ancestor element that is not its direct parent? I am aware that max-height requires a fixed height for calculation, so this query is distinct from ...

cssheight

Struggling to vertically center input within Bootstrap 4 column

I'm attempting to design some form elements and align the inputs vertically within the columns. I've experimented with vertical-align:middle; and margin:auto 0;, however, neither of these solutions seem to be effective. input { vertical-alig ...

cssbootstrap-4

Using ngModel to bind data within an Angular dialog box

I'm facing an issue with my project where changes made in the edit dialog are immediately reflected in the UI, even before saving. This causes a problem as any changes made and then canceled are still saved. I want the changes to take effect only afte ...

htmlangulartypescript

Automatically Switch Font Colors to Red and Green

I am looking to automate the process of changing multiple textbox colors based on the class property. <input type="text" Class="ChangeColor" /> <input type="text" Class="ChangeColor" /> <input type=& ...

javascriptcss

Exploring carousel elements in Selenium using Python

As a user of Selenium, I am trying to loop through the games displayed in the carousel on gog.com and print out all the prices. Below are two random XPaths that lead to the information within the carousel: /html/body/div[2]/div/div[3]/div/div[3]/div[2]/di ...

pythonhtmlseleniumxpath