Implementing a button on a polygon shape within an SVG

I have an SVG at the bottom and I would like to place a button on the bottom line that is also responsive. How can I achieve this using CSS?

What I am trying to accomplish:

Example Image

Is it possible with just CSS and how should I go about implementing it?

.container {
  position: absolute;
  width: 100vw;
  height: 500px;
  top: 0;
  z-index: -1;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 0;
}
polygon {
  fill: green;
}
<div class="container">
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 40,0 40,100 0,80" />
</svg>
</div>

htmlcsssvgresponsive-design

Answer №1

Kindly review this response:

Codepen link:- https://codepen.io/Rishab2019/pen/LYpzxKw

.container {
  position: absolute;
  width: 100vw;
  height: 500px;
  top: 0;
  z-index: -1;
}

#t1{
  position:inherit;
  margin-top:-350px;
  color:white;
  font-size:40px;
  margin-left:400px;
}
#t2{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:400px;
}

#t3{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:400px;
}

#t4{
  
  margin-top:-125px;
  margin-bottom:0px;
  color:white;
  font-size:35px;
  margin-left:700px;
}

#t5{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:700px;
}
#t6{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:700px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 0;
}
polygon {
  fill: green;
}

.mybutton{
  color:white;
  background-color:#e6c619;
  border:none;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
  border-radius:20px;
  width:160px;
  height:40px;
  margin-left:30%;
  margin-top:405px;
  cursor:pointer;
  box-shadow: 0 2px 5px 0px grey;
  -moz-box-shadow: 0 2px 5px 0px grey;
  -webkit-box-shadow: 0 2px 5px 0px grey;
}



@media all and (max-width:768px){
  
  .mybutton{
    width:140px;
    margin-top:411px;
    
  }
  
}


@media all and (min-width:620px) and (max-width:940px){
#t1{
  position:relative;
  margin-top:-350px;
  color:white;
  font-size:40px;
  margin-left:20.7%;
}
#t2{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:20.7%;
}

#t3{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:20.7%;
}
  
  #t4{
  
  margin-top:-125px;
  margin-bottom:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}

#t5{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
#t6{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
  
}


@media all and (max-width:619px){
#t1{
  margin-top:-350px;
  color:white;
  font-size:40px;
  margin-left:50px;
}
#t2{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:50px;
}

#t3{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:50px;
}
  
  #t4{
  
  margin-top:-125px;
  margin-bottom:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}

#t5{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
#t6{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
  
}
<div class="container">

<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 40,0 40,100 0,80" />
    </svg>

</div>
<button class="mybutton">LOGIN</button>
  <div id="t1">Some Text</div>
  <div id="t2">Some Text</div>
  <div id="t3">Some Text</div>
  <div id="t4">Some Text</div>
  <div id="t5">Some Text</div>
  <div id="t6">Some Text</div>

This solution maintains responsiveness as well.

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

Building a personalized payment experience using Python Flask and Stripe Checkout

I'm attempting to set up a customized checkout integration with Stripe on my Flask web application and I've encountered some issues. After copying the code from the Stripe documentation (located at https://stripe.com/docs/checkout#integration-cu ...

javascriptpythonhtmlflaskstripe-payments

Navigating through different pages in PHP

How can I set up my php page to handle the following situations? When someone clicks on "my account", they should be directed to the login page if they are not currently logged in. If a user is already logged in and clicks on "my account," they should ...

phphtml

What is the process of Defining an Element Based on Two Attributes in C#?

Is it feasible to specify a web page element based on two attributes? For example, I can locate the element by its innertext Element imagePage = ActiveBrowser.Find.ByContent(pageNumbers[p],FindContentType.InnerText); Alternatively, I can identify an ele ...

c#javascripthtmlasp.net

tips for adding text to an input field after it has been submitted

Is there a way to automatically add text to an input field after the user has entered their information? For example, if a user types "youtube.com" into a search bar, could the input then apply ""? ...

javascripthtml

fullpage.js: the content exceeds the height limit

I am currently working on customizing the jquery script fullpage.js for a website built on the French CMS "SPIP" (). This script is used to create a one-page website with both horizontal and vertical navigation. However, I have encountered an issue with ...

javascriptjquerycssfullpage.js

Hide Bootstrap columns for Printing

I am currently working on a webpage layout that consists of two columns. <div class="container"> <div class="row"> <div class="col-md-8 "></div> <div class="d-print-none col-md-4"></div> </div ...

cssflaskbootstrap-4

Ways to avoid data looping in jQuery Ajax requests

This is in relation to the assignment of multiple users using the Select2 plugin, Ajax, and API. The situation involves a function that contains 2 Ajax calls with different URLs. Currently, there are pre-selected users stored in the database. The selection ...

javascriptjqueryhtmlajaxjquery-select2

The checkbox is failing to display as checked even after its value has been dynamically set to true

Currently, I am immersed in a project within ASP.NET MVC that involves displaying data on a page where users can interact by selecting checkboxes to make changes. In cases where there are numerous checkboxes present, a "Select all Checkboxes" button become ...

javascriptjqueryhtmlasp.net-mvc

Div controls the margins of all other elements

I am encountering an issue when trying to position #slider, where the navigation and elements above it also move. It seems as though they are contained within #slider, even though they are not. HTML: <div id="slider" class="clearfix"> <d ...

htmlcsscss-float

Decapitalizing URL string in jQuery GET request

Check out my code below: $.get('top secret url and stuff',function(data){ console.log($("[style='color:white']", data.results_html)[0].innerHTML); window.html = document.createElement('d ...

javascriptjqueryhtmlgetsteam-web-api

The alignment for Bootstrap's NAV element within a display:table-cell element seems to be off when viewed on Firefox浪

Here is an example of HTML markup with Bootstrap library included: <div class="container"> <div class="card"> <ul class="nav list"> <li class="element"> <a href="#">Element</a> </li> ...

htmlcsstwitter-bootstrap

Assigning a JavaScript code block to execute exclusively on designated pages

I have implemented webpack to bundle all my .js files into one app.js, which is utilized across all pages in my project. However, I have encountered an issue where code intended for one page is impacting another page where it is not required. For example, ...

javascripthtmlwebpack

The bottom margin fails to function as expected

I've been trying to position a loading image at the bottom right of the page, but everything seems to be working except for the margin-bottom. <div id="preload"> <div align="right" style="margin-bottom:40px; margin-right:50px;"> ...

htmlcssalignmentmargin

Issue with rendering Html Element on FireFox compared to Chrome

Having some trouble with an individual component (a simple dropzone) while testing on Firefox. It seems to work fine on Chrome, and the CSS looks good. Css .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); wi ...

javascripthtmlcss

Updating an Image Using JavaScript

Having trouble changing an image using JavaScript. Followed instructions to use document.getElementbyId("image").src = "image2.jpg", but it's not working. Script is placed at the bottom after the image tag in the HTML. HTML code: ...

javascripthtml

Personalized CSS styling for Jquery Mobile version 1.3

Having trouble with styling a page in jquery using CSS, specifically aligning #navgroup to the center of the footer and removing an additional white counter from the slider. Here is my code: <!doctype html> <html lang="en> <head> < ...

jquerycssjquery-mobilejquery-mobile-navbar

Click on any checkbox to select all checkboxes at once

I have created a table with each column containing a checkbox. My goal is to select all checkboxes in the table when I click on the checkbox in the top row (th). Can someone guide me on how to achieve this? Below is my code: <table style="width:100%"& ...

javascripthtml

What is the process for utilizing html4 or previous versions in eclipse mars?

I recently started using Eclipse and my version of the software automatically supports html5. However, when I try to use outdated tags that are not compatible with html5, I encounter errors. Can someone please provide guidance on how I can switch to usin ...

eclipsehtmlweb

How to make external links open in a new window within wagtail

Recently, I made a change to include target="_blank" in external links by implementing the following code: @hooks.register('after_edit_page') def do_after_page_edit(request, page): if hasattr(page, "body"): soup = BeautifulSoup(page. ...

pythonhtmldjangohookwagtail

My Testimonial Slider seems stuck in its current position and won't budge to the left

As an aspiring web designer, I took a template from CodePen and crafted a testimonial slider for my website. To seamlessly merge it with the background, I've been trying to shift the entire testimonial to the left. Despite attempting the float-left p ...

htmlcssslider