What is the best way to design a polygon-shaped responsive div?

I've been attempting to design a unique layout with a pentagon-shaped div, however, I'm encountering some challenges. Despite using SVG for the shape, it does not display correctly in Firefox. Additionally, I need the div to be responsive and scale well on smaller screens, but using percentages for the pentagon's points has not yielded the desired results. The same applies to using percents for the x and y values in the text. Here is what I have tried so far:

polygon {
  fill: url(#image);
}
<div id="banner-shape">
  <svg width="1440px" viewBox="0 0 1440 940" preserveAspectRatio="xMinYMax meet">
          <defs>
            <pattern id='image' height='940' width='1440' patternUnits='userSpaceOnUse'>
              <image xlink:href='https://cdn.wallpapersafari.com/12/87/pzB7wF.jpg' height='940' width='1440' />
            </pattern>
          </defs>
          <g>
            <polygon points='0,0 1440,0 1440,727 503,940 0,719' />
            <text x="20%" y="5%0" font-size="90px" fill="blue"> New MODEL! </text>
          </g>
        </svg>
</div>

htmlcsssvgresponsive

Answer №1

  1. Eliminate the width and height attributes from the <svg> tag.
  2. Integrate the SVG onto your webpage, either directly in the html code, as <img>, or through a css background image.
  3. Configure the css accordingly so that the svg is resized to match the width of its parent container, depending on how the svg was added (e.g., use background-size: 100% for a background image or width: 100% for an element).

Following these steps should solve the issue at hand.

Answer №2

After much trial and error, I finally created a div with dimensions that mimicked what the polygon would look like if it were a square. By utilizing inline SVG clipPaths for Firefox and a CSS-defined clipPath for Webkit browsers, I was able to achieve my desired effect. Unfortunately, I couldn't get it to work on Internet Explorer. Here's the code snippet:

Because I needed to insert content inside the div itself and overlay a background, this approach ended up being the most effective solution.

#index-banner {
  position: relative;
  height: 65.29vw;
  /*to keep aspect ratio*/
  width: 100vw;
  /*to adjust the banner to the browser window*/
  background-image: url(https://cdn.wallpapersafari.com/12/87/pzB7wF.jpg);
  background-color: #615966;
  background-blend-mode: multiply;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 77.3%, 34.9% 100%, 0% 76%);
}
<svg width="0" height="0">
        <defs>
            <clipPath id="clip-index" clipPathUnits="objectBoundingBox">
                <polygon points='0,0 1,0 1,0.773 0.349,1 0,0.76 0,0' />
            </clipPath>           
        </defs>
    </svg>

<div class="section no-pad-bot valign-wrapper hide-on-med-and-down" id="index-banner" style="clip-path: url('#clip-index');">
  <div class="content of the polygonal div"></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 file reader feature is currently experiencing issues on both Chrome and Internet Explorer browsers

After uploading an image file from my PC, I convert it to a data URL and then use the img element to preview it. Surprisingly, this process works perfectly fine in Firefox. However, when I try to do the same in Chrome or IE, the src attribute of the img el ...

javascripthtmlfile-uploadfilereader

Please select the option to choose all values

Currently, I am working on implementing a select option feature on my webpage. I have integrated PHP into it to ensure that the selected option remains unchanged after submission. My goal is to include a value of "any" so that when the user chooses "ANY," ...

javascriptphphtml

Creating lasting placeholder text with gaps between each word

Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...

htmlcss

Vanishing Span in CSS3 Flexboxes

I came across this particular HTML code: <div class="panel panel-info"> <div class="panel-heading">Person</div> <div class="panel-body"> <div class="data"> <p class="keys"> ...

htmlangularjscssflexbox

preserve functionality when switching between pages

I have created two simple functions that can change the background color of the body. <script type="text/javascript"> function switchBackground(color){ document.body.bgColor=color; } </script> I am using links with onclick to execute thes ...

phpjavascripthtml

Utilizing regular expressions in Powershell to modify a CSS file

Snippet from my current theme.css file: .actionBlock[selected] { color: var(--gray11); background-color: var(--gray11); } I am trying to modify color: var(--gray11); to color: #FFF; /* UPDATED : var(--gray11) */ After attempting in Po ...

cssregexpowershell

How can I create a rectangular border around text using the HTML5 canvas?

How can I dynamically draw fitted rectangles around text labels (person's full name) without fixed sizes, taking into account that the labels vary in lengths? Below is the code used to draw the text labels: var ctx = document.getElementById('ma ...

javascripthtmlcanvas

react-responsive-carousel: setting a specific height for thumbnail images

After setting a fixed height for the image, I noticed that the same height is also being applied to the thumbnails. How can I avoid this issue? <Carousel width="600px" dynamicHeight={false}> {data?.book?.images.map((image, i) => ( ...

javascriptcssreactjscarouseltailwind-css

Mantine - Showing search results in a scrollable list that stops at the parent's height and then adds vertical scrolling

I am currently in the process of developing a web application that needs to occupy the entire height and width of the screen using 100vh and 100vw. The main app itself should not have any vertical or horizontal scrolling, but individual components/divs wi ...

cssreactjsflexboxcss-gridmantine

Acquire dynamically loaded HTML content using Ajax within a WebView on an Android

I have been attempting to extract the content of a web page on an Android platform. Despite trying JSoup, I faced a limitation with ajax support. As an alternative, I am endeavoring to embed the URL within a hidden web view and retrieve the HTML in the on ...

javascriptandroidhtmlajaxandroid-webview

The initial navigation pill content failed to display in Bootstrap

I am experiencing an issue with my pills that have 4 tabs. Initially, when I reload the page, the content of the first tab does not show up. However, if I navigate to another tab and then back to the first tab, the content appears. Can anyone suggest a fix ...

jquerycsstwitter-bootstrap

Learning to use Material-UI: Wrapping a list into columns

Currently, I am using Material-UI to display a list of checkboxes, similar to the example shown here. The problem arises when my list contains around 30 items and I am placing them inside a dialog box. I want the checkbox list items to stack vertically up ...

cssreactjsflexboxmaterial-ui

How to send form group in Angular when the enter key is pressed

When I press the submit button on a form, it sends a request to the database to filter data in a grid. However, I also want the form to submit when the enter key is pressed. HTML <form [formGroup]="bmForm" (keyup.enter)="onSearchClic ...

htmlangulartypescript

Positioning items to align an image in the center with both left and right elements

There's a simple question I have for all you HTML and CSS experts out there. I'm attempting to center align a list next to an image, but I can't seem to figure out how to position the list to the left or right of the image. This is what my ...

htmlcss

Issues persist with redirection when using AJAX and PHP in a login form, resulting in the user staying on the index page

After filling out both the email and password form fields and clicking the sign-in button, my script is functioning correctly. However, upon clicking the sign-in button, I want the user to be redirected to the home page. Currently, the user remains on the ...

javascriptphphtmlajax

Load pages using ajax with conditional if statements

I am currently developing a website that relies on ajax to load its inner pages. However, I need certain groups of pages to have background and container width changes as well. Is there a way for me to use conditional if statements to modify the class or ...

jqueryhtml

Leveraging Angular and HTML to efficiently transfer the selected dropdown value to a TypeScript method upon the user's button click

I am experiencing difficulty accessing the .value and .id properties in {{selectItem}} in order to send them back to the typescript for an HTTP post at a later time. Although there are no specific errors, I have encountered exceptions and have tried search ...

htmlangulartypescriptcollectionsdata-binding

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

Here are the codes I'm working with: ul.pathnav a:before{ content:"\0X3E"; text-decoration:none; } I have been trying to use the hex code \0x3e for ">", but it doesn't seem to be working. However, when I tried usi ...

htmlcssencodingutf-8

jquery deleting the parent container of a child element

I have been attempting to eliminate the parent element of the label associated with the attribute record_type. Below is the HTML content: <div id="append"> <div class="col-md-6 form-group hide_fields" style="display: block;"> <l ...

jqueryhtmlparent

The icon cannot be displayed using the <use> tag in HTML

While examining the source code, I stumbled upon the <use></use> tag. <use xlink:href="#icon-ghost"></use> I couldn't find extensive information about this particular tag. Can someone explain what it is and how it is typicall ...

htmlcss