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

The toggle feature doesn't seem to be working properly in Bootstrap 5

I've tested it in the latest Bootstrap version and still can't get it to work. I even switched to version 5, but the toggle functionality remains a problem. I've tried various solutions from StackOverflow with no luck ** I've added all ...

javascripthtmlcssbootstrap-modalbootstrap-5

Creating a scrolling background effect using HTML and CSS: ``Background Parallax

I'm trying to keep the background of my HTML document fixed in the upper left corner, so that when a user scrolls through the page, they only see parts of it. Here's the code I'm using: <body style="background-image: url(background.png) ...

cssbackground

<ol><li>Arranges elements in a peculiar way if the image is aligned to the left</li></ol>

Explore this comprehensive presentation on combining PDFs online. In this blog post, I have encountered two instances of <ol><li> formatting. The first one is styled properly using the following CSS: .post_content ul, .post_content ol ...

cssimagehtml-listsalignment

Vue alert: Issue encountered in watcher 'childItems' callback - 'TypeError: Unable to access property 'tag' as it is undefined'

I am currently in the process of developing the Store page for a web application. I am utilizing Axios to retrieve product data and display it in a Vue template. While the backend functionality is working correctly and the frontend is rendering successfull ...

javascripthtmlvue.jsvuejs2buefy

"Maintaining Consistency: Ensuring The First Row is Repeated on Every

When trying to save a PDF using jspdf, I encountered an issue with tables in my HTML. The tables do not have headers, but JsPDF is automatically repeating the first row of the table on every page, causing overlap. I don't want headers on every new pag ...

javascriptangularjshtml

I'm having an issue with Internet Explorer where the link doesn't function properly when I enclose the content within an <a> tag. Could anyone

I understand that this might not be the preferred approach, but a customer has requested live text wrapped in just one HTML tag.... Here's the challenge I'm facing: I currently have some code structured like this: <a href="google.com"> ...

html

The CSS styling undergoes a transformation following the integration of Bootstrap

Hey there! I'm new to the world of web development and currently working on creating a simple todo list application. Recently, I revamped my webpage design by incorporating Bootstrap, and the results were pretty exciting! Original Code without Bootst ...

htmlcssdjangobootstrap-4

Apply CSS styling to the v-html output

I am trying to enhance the style of HTML code using a v-html but have been struggling with finding a working solution so far. Can anyone help me out? :( Below is my code snippet: Template : <div class="para" v-html="value" /> Script : exp ...

htmlcssvue.jssassvuejs2

Guide on submitting a multi-step form using jQuery

Greetings, I am in need of assistance with submitting a jQuery step wizard form. Although I have a plugin that helps, it primarily uses jQuery rather than HTML. So far, I have accomplished the following steps: - Set up the necessary database and table - C ...

phpjqueryhtmlforms

Assigning arbitrary hidden form data from dropdown selection

Would like to assign Layers Value as one of the following: GFS Meteogram 3day std or WRF 20 Global Meteogram 3day Std depending on the option selected from the dropdown menu <div><select id="myselect" class="productViewerParameter" name=" ...

javascripthtml

Switching between two states of a single 'td' element within a column

I am trying to implement a feature where only specific elements in the fourth column of a four-column table toggle when clicked. For example, clicking on an element in the fifth row third column should toggle the corresponding element in the fifth row four ...

javascriptjqueryhtmlhtml-table

Run JavaScript code whenever the table is modified

I have a dynamic table that loads data asynchronously, and I am looking for a way to trigger a function every time the content of the table changes - whether it's new data being added or modifications to existing data. Is there a method to achieve th ...

javascripthtmlangulartypescript

"Obtaining Google locations within a modal box - a step-by-step

Having trouble with my Google Places search integration in Angular 2. <input type="text" type="text" class="form-control" placeholder="Address" [ngClass]="{active:signupSubmitted && !signUpForm.controls['formatted_address'].valid}" [ ...

htmlcssangularangular2-templatebootstrap-4

Access a local website path using JavaScript upon opening the browser

I need a Javascript function that can determine the day of the week when my html file is accessed, allowing me to automatically open a specific sub-page within my project. ...

html

Expanding the input range slider to fill the entire available space

https://jsfiddle.net/a5gdhmfn/1/ <div> <i>O</i> <input type="range" /> <button/> <div>...</div> </div> Inside a div, there is a range slider along with other fixed-width elements. The issue ...

htmlcss

Is there a way to enlarge the font size for a complete tag?

I'm having trouble with a project. One of the tasks is to use jQuery or JavaScript to increase the font size of a paragraph. The console statements are incrementing by +1 with every mouse click (the first click adds 1, the second adds 2, and so on). ...

javascripthtmljquery

Tips on resolving issues with form input that is not accepting input on a Mobile device

As a newbie in HTML and CSS, I attempted to design a form with various fields. While the fields work perfectly on larger screens, they do not allow input on smaller screens (mobile devices). I used the Firefox inspect tool to troubleshoot the issue, but c ...

htmlcssbootstrap-4

Tips for customizing the appearance of jscrollpane in EasyUI

I need help customizing the jscrollpane style in EasyUI Frozen Columns for DataGrid. I've tried changing it using the following CSS: ::-webkit-scrollbar { width: 12px; } However, it doesn't seem to have any effect. ...

cssjscrollpanejquery-easyui

Can you spot the real transformation happening?

Is there a built-in way (possibly in one of the frameworks) to determine if a form has been modified from its initial values? The onchange event is not sufficient, as it triggers even if no real change has occurred (such as toggling a checkbox on and off ...

javascripthtmlprototypejs

Retrieve information from hyperlinks and organize it into a structured format in a chart

Is there a way to extract href data from a website page and input it into a table using jQuery? I often have clients who need me to transfer links from their old sites to my CMS. If we can put these links into a spreadsheet format, it would make importing ...

jqueryhtml