Unusual visual effect of an SVG line on the bottom border

Can someone tell me if using an svg line creates a strange effect on the border-bottom?

https://i.sstatic.net/dPxPh.png

This is the HTML code I have:

<div id="father">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: rotate(360deg);background: #34495e;">
    <path fill-opacity="1" d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,138.7C840,171,960,245,1080,245.3C1200,245,1320,171,1380,133.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" fill="#e4f1fe"></path>
  </svg>
  <div id="subsling"></div>
  <!-- This line appears and disappears depending on the size of the browser window. -->
</div>
htmlcsssvgcross-browser

Answer №1

In my opinion, it would be beneficial to include the following CSS code: svg{display:block;} within the svg element

svg{width:100%;display:block;}
#subsling{background: #e4f1fe;padding:1em;}
<div id="father">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: rotate(360deg);background: #34495e;">
          <path fill-opacity="1" d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,138.7C840,171,960,245,1080,245.3C1200,245,1320,171,1380,133.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" fill="#e4f1fe"></path>
</svg>  
 <div id="subsling">
   <p>wertyui wertyuio ertyufghjklñ  ertyuiop eghjkl </p>
 </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

Utilize PHP to select the same checkbox across multiple pages of a form through a post request

I am a newcomer to coding and I am trying to figure out how to automatically select the same check-box that was marked on the first page of my multi-page form. For example, if the user checks the box labeled Red, I want the box on page 2 to be auto-filled ...

phphtmlforms

When trying to read the text of an element, only the text of the first element is displayed

I have implemented a feature in ASP.Net MVC where I am fetching a list from a controller and displaying it in tile format on the view. However, when I click on a specific tile, I expect to see an alert message with the application name related to that par ...

javascriptjqueryhtmlasp.net-mvc-4

How to perfectly align text vertically using Bootstrapstylesheet

Previously attempted solutions from: here for vertical-align with Bootstrap 3 and also from: here for vertical-align: middle with Bootstrap 2 but unfortunately, neither worked. If you want to view the page, click here: Check out the code snippet: <di ...

htmlcsstwitter-bootstrap

"Mastering the art of CSS: when the cascade goes

Can someone assist me with a tricky cascading style problem that is not so straightforward? I need to override a CSS child style with another style of equal importance (012), without changing its order in the CSS sheet... To see a concrete example, pleas ...

css

Using makeStyles() in MUI for conditional rendering

Trying to dynamically change the value of backgroundColor under the property "& + $track" using props.disabled but it seems that MUI does not recognize it. Why could that be? const useStyles = makeStyles((theme) => ({ root: { overflow: "vis ...

javascriptcssreactjsmaterial-ui

Floating Action Button is not properly attached to its parent container

When developing my React Js app, I decided to utilize the impressive libraries of Material UI v4. One particular component I customized is a Floating Action Button (FAB). The FAB component, illustrated as the red box in the image below, needs to remain p ...

javascriptcssreactjsmaterial-ui

Executing Array.prototype.filter() results in an empty array being returned

I have a list of jQuery elements that I collected using the .siblings() method, and now I am trying to filter them. Here is the HTML code: <div> <div> <label for="username">Username</label> <input class="form ...

javascriptjqueryhtml

Using Jquery to switch between different CSS styles

I'm currently working with a jQuery code that is functioning properly. $(window).load(function() { $('.menuBtn').click(function(e) { e.preventDefault(); (this.classList.contains('is-active') === true) ? this.c ...

jquerycss

Prevent pseudo elements from increasing the height of the viewport

Unexpected issue arose. I recently discovered pseudo elements and have been utilizing them to create a skewed header and footer design without affecting the text inside. The header looks good and functions correctly, meeting my expectations. This is what ...

htmlcsspseudo-element

bootstrap used for creating horizontal radio buttons

I'm attempting to horizontally align radio buttons within a form without relying on the Bootstrap library. The following code achieves this: <form id="test_form"> <div class="control-group"> <label for="Q1">First question</ ...

javascripthtmltwitter-bootstrap

Include images in the form of .png files within the td elements of a table that is dynamically generated in the index

I have successfully created a table using embedded JavaScript with the help of messerbill. Here is the code: <table id="Table1"> <tr> <th>Kickoff</th> <th>Status</th> <th>Country</th> < ...

javascripthtmlnode.jsejs

Comparing the Usage of Forward Slash [/] and Space in CSS

I'm a bit confused about when to use certain CSS syntaxes. For instance, I've come across: border: 2px solid red; as opposed to: border-width: 2px; border-style: solid; border-color: red; However, I've also seen: font: 12px/18px; rather t ...

css

Using Django filters alongside pagination results in the same page being displayed even after clicking the next URL

Whenever I search for something (like "tom"), the first page displays the results correctly. However, when I click on the next page URL, it still shows the same results without any changes. The URL, however, changes from to filters.py: class VideoFilter( ...

pythonhtmldjangodjango-filterdjango-pagination

Launching a Bootstrap modal in Portrait mode through JavaScript

Is there a way to trigger the opening of a modal when the screen is in "Portrait" orientation and hide it when the screen is in "Landscape" orientation? I have tried implementing this functionality, but it seems to not work properly when the page initiall ...

javascripthtmlbootstrap-4model

Events related to key press timing in HTML 5 canvas

Currently, I am developing a game similar to Stick Hero for Android using HTML5. I am working on the code that will capture the time of key press (specifically the right arrow key with ASCII 39) in JavaScript and expand a stick accordingly. <!doctype h ...

javascriptjqueryhtmlcanvasjquery-events

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Is there a way to retrieve all removed nodes from the DOM that have specific classes using CSS selectors? Below is an example of how it can be done with some complexity, but is there a simpler and more general approach? new MutationObserver(mut =& ...

javascripthtmlcssmutation-observers

Creating visually appealing tables with nested tables using CSS for styling including borders and backgrounds

Looking to create webpages that have a variety of tables, including a main table with a header (marked 2 on the picture) and several data tables for the user (marked 1 on the picture). To style these specific data tables, I've added some custom CSS: . ...

htmlcss

Unable to align image using iframe in middle position

I am currently facing an issue with aligning a dynamically populated form within an iframe to the center of the webpage. Despite trying to use padding-left:13% to center the form, I encountered a problem with the form displaying a scroll bar and empty spac ...

htmlcssangularjsiframe

The form includes Bootstrap columns and a button, but there is noticeable wasted space within the

This is the form structure I am working with: <form method="GET" action="."> <div class="container-fluid pt-2 px-5 py-3"> <div class="row g-4"> <div class= ...

htmlcssbootstrap-5

Issue with radio buttons: permitting multiple selections

As part of my project, I am creating a form using bootstrap 4. The form includes radio buttons to gauge the level of proficiency in different languages. Each language has its own div with six inline radio buttons representing various levels of proficiency. ...

htmlbootstrap-4radio-button