Ways to crop a background image from the bottom left and right using CSS

I'm attempting to replicate the background image found at https://i.stack.imgur.com/nYDet.jpg

My attempts to use clip-art on this image have been unsuccessful in achieving that shape.

.hero-section {
  height: 740px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://i.postimg.cc/RZxY1MMZ/hero-image.jpg") no-repeat top;
  background-size: cover;
  width: 100%;
  z-index: 5;
  clip-path: polygon(0% 0, 100% 0%, 50% 80%, 0 80%);
}

.hero-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
}

.hero-heading h1 {
  color: #fff;
  text-align: center;
  font-size: 50px;
  font-family: "Playfair Display", serif;
  font-weight: bold;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.hero-heading h1 svg {
  position: absolute;
  bottom: -10px;
  left: -35px;
  z-index: -1;
}
<section class="hero-section">
  <div class="hero-heading">
    <h1>
      H1 Impact Summary
      <!-- <img src="./assets/underline.svg" alt="Heading Image" /> -->
      <svg xmlns="http://www.w3.org/2000/svg" width="524.381" height="36.652" viewBox="0 0 524.381 36.652">
            <path
              id="Path_2986"
              data-name="Path 2986"
              d="M555.839,170.15c-10.4-2.281-89.638-2.05-95.272-2.8-4.522-.929,5...

</section>

Link to my version on Code Sandbox

If there's an alternative method to achieve this effect without using clip-art, please do share your suggestions.

Your assistance would be greatly appreciated.

htmlcss

Answer №1

If you're looking to create your own unique polygons, check out this awesome website . Explore the shapes on the right and click on Custom polygon to design one yourself.

The bottom of the image may be difficult to see due to the white background, so here's a modified version:

(Please note: Div height has been reduced for better visibility in snippet window)

div {
  height: 150px; /* Reduced for visibility in snippet */
  width: 100%;
  clip-path: polygon(0 0, 0 90%, 50% 100%, 100% 90%, 100% 0);
  background: red; /* Image can be added here */
}
<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

Tips for Implementing Multi-Level/Nested in Ajax Requests

I am currently developing a user-friendly web application with intuitive multi-level options that loads new content without the need to refresh the entire page. This is how my structure looks: /index.php /schools.html /colleges.html Within schools.html, ...

jquerycssajax

Styling the <Autocomplete/> component in Material UI with React to achieve rounded corners

Google's search bar has always been a favorite of mine, with its rounded corners and generous text padding. https://i.stack.imgur.com/UbKrr.png I'm attempting to replicate this aesthetic using Material UI's <Autocomplete/> component ...

javascriptcssreactjsnext.jsmaterial-ui

Chrome causing a background-size cover issue

I encountered an issue with this code. It runs smoothly on Firefox 50, but encounters failures on Chrome Version 54.0.2840.99 m (64-bit) on Windows. .test { background: url(datas/images/3.jpg) no-repeat center center fixed; background-size: cover ...

css

Tips for preventing the use of website URLs as variables in jQuery ajax() calls:

Having some trouble. For example: $(document).ready(function () { $("#btnSend").click(function () { var noti_p = { url: "Pusher_Controller.ashx", data: "&appname=" + $("#selt1").val() + "&title=" + $("#title"). ...

javascriptjqueryhtmlajax

Update the class name by utilizing template literals

I'm currently in the process of mastering template literals as I have a project where I need to utilize them. However, I seem to be encountering an issue that I can't quite figure out. Here is the code that is currently working: const classes = ...

javascriptcssreactjsmaterial-uistyles

Learn how to incorporate a consistent header and footer across multiple pages on a website with Node.js, ExpressJS, and either hbs or ejs templates

Creating a common header (navbar) and footer page to be included in multiple/several pages of a website. I want to create a dynamic website using Node.js and Express.js. The code for the navbar and footer will be placed in a common file named header.html ...

javascripthtmlnode.jsexpress

Despite being positioned absolutely, they are able to make z-index work effectively

Currently, I am facing an issue with two elements in my design. The first element consists of dotted circles that should have a z-index of -999 so they remain in the background entirely. The second element is a login form that needs to have a z-index of 99 ...

htmlcssz-index

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

Currently, I am facing a task where I have a table with a column filled with textboxes. My goal is to eliminate the textboxes using jQuery/JavaScript while retaining the values within them. Here are a couple of methods I have attempted: // removes both t ...

javascriptjqueryhtml

Which option is more effective: using an id or using !important?

While some say to avoid using the !important rule and others argue that since ids are unique, there is no need to target like #main > #child and you can simply use #child. In my particular case: #main > div{ color: red; } #child{ color: blue;/ ...

csscss-selectors

Is there a way to convert various elements sharing the same class into a list of array items?

Essentially, I am dealing with multiple elements sharing the same class name. My goal is to retrieve an array of integers from an API and then iterate through each element with this class name, replacing them with elements from the array sequentially. For ...

javascripthtmlarraysclassweb

What steps can I take to troubleshoot the cause of my browser freezing when I try to navigate to a different webpage

Within this div, users can click on the following code: <div id="generate2_pos" onclick="damperdesign_payload();" class="button">Generate P-Spectra</div> Upon clicking, the damperdesign_payload() function is triggered, leading to a link to an ...

javascripthtml

Obtaining data with jQuery.Ajax technology

I am attempting to retrieve real-time data from a different URL and display it in a text field every second without refreshing the entire page. The content of the URL is constantly changing, so I want the field to update accordingly. However, despite my ef ...

javascriptjqueryhtmlajax

Retrieve the current height of the iFrame and then set that height to the parent div

Within a div, I have an iFrame that needs to have an absolute position for some reason. The issue is that when the iFrame's position is set to absolute, its content overlaps with the content below it. Is there a way to automatically adjust the height ...

javascriptjqueryhtmlcssiframe

Problems arising from Jquery append functionality

When using the append method, my inner div is only attaching one WHEAT-COLORED-BOX, whereas when using appendTo, my inner div attaches all the required number of WHEAT-COLORED-BOXES. Therefore, in this case, appendTo gives the correct result while append f ...

javascripthtmljquerycssnode.js

Displaying list items with <output> compared to using <ul>

While it's commonly known that the <ul> tag is used to display <li> items, I recently discovered that the <output> tag can also be utilized for this purpose after reading about it here. In my current project, I have been using the & ...

html

Does anyone know of a CSS/JavaScript framework that can be used to replicate the look and functionality of the iOS home

I'm wondering if there is a CSS/JavaScript framework that replicates the layout of an iOS home screen. I want to create a kiosk website with a grid layout similar to Android/iOS where apps can be displayed as icons. ...

javascripthtmlcssioshomescreen

Responsive navigation menu featuring dynamic dropdown menus using HTML and CSS

Looking to design a responsive HTML and CSS navigation menu with multiple dropdown menus? You're in the right place. I've scoured countless YouTube videos, but haven't quite found the perfect template for a two-part navigation menu that tic ...

htmlcssheadernavigationresponsive

What sets apart the <img> and <Image> layout attributes in NextJS?

While working on custom checkboxes, I came across a unique situation - the only way the positioning of the checkboxes aligns properly is if the classes '.init' and '.hover' are assigned to images, and the class '.done' is disp ...

csscheckboxnext.js

Diverse positioning across various browsers

I have a navigation menu with alternating divs - one containing a menu link and the other a 'menu separator' div with a 2px wide 'separator bar' image. The width of the separator divs is set to 24px to create proper separations. For so ...

jquerycssbrowserdrop-down-menualignment

Create a Boostrap navbar with a form and links aligned to the right using the navbar

I'm trying to use navbar-right on a navbar-form and a navbar-nav, but the form ends up on one row and the nav links on another row on the right. How can I make the navbar display the brand on the left and have a search field followed by nav links on t ...

htmlcsstwitter-bootstrap