CSS3 Feature: Chevron-shaped banner with jagged edges

I'm currently working on building a unique chevron-style banner using CSS3, but I've run into some aliasing problems specifically in Chrome. Despite trying to utilize the 

-webkit-backface-visibility: hidden
attribute, I still can't seem to resolve the issue.

Let's take a look at the CSS code:

.banner {
    height: 0px;
    width: 280px;
    border-left: 20px solid rgba(0, 0, 0, 0);
    border-right: 20px solid rgba(0, 0, 0, 0);
    border-bottom: 40px solid black;
    border-top: 40px solid black;
    -webkit-backface-visibility: hidden;
    text-align: center;
    line-height: 0;
    color: white;
}

Here is a snippet of the HTML used:

<div class="banner">
    Hello World
</div>

If you'd like to see the issue firsthand, check out this fiddle link: http://jsfiddle.net/4PWP5/2/

Any suggestions or assistance in resolving this problem would be greatly appreciated.

htmlcss

Answer №1

Warning: Cautionary note ahead.
Apologies, I meant SVG.

Feel free to customize and modify this sample according to your specific requirements.

Check out the Sample Fiddle here

HTML:

<div id="container">
    <svg viewBox="0 0 10 10" preserveAspectRatio="none">
        <path d="M 0,0 L 10,0 9.5,5 10,10 0,10 0.5,5 z" fill="black"></path>
    </svg>
    <span>Hello World!</span>
</div>

CSS:

#container {
    width: 300px;
    height: 60px;
    position: relative;
}

#container > svg {
    width: 100%;
    height: 100%;
}

#container > span {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    color: white;
}

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

Converting an Integer to a String and then manipulating the String format

<p class="card"> Credit Limit: <b style="color: #00e500 ;"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcf89c91b3b8b9b0f29faeb9b8b5a890b5b1b5a8f288b38fa8aeb5b2bb">[email protected]</a>().ToLocaleSt ...

c#htmlstringvisual-studioint

quickest method for attaching a click listener to dynamically added elements in the document object model

When adding multiple elements to the DOM, how can we ensure that these elements also have a click handler attached to them? For instance, if there is a click handler on all elements with the "canvas-section" class, and new "canvas-section" elements are con ...

javascriptjqueryhtml

The Masonry Grid is leaving empty spaces unfilled

I've been experimenting with Sveltekit and SCSS to create a Masonry grid. However, I'm facing an issue where the items in my grid are not filling in the empty space as expected. Instead, they seem to be following the size of the largest image, le ...

cssflexboxsveltekit

Utilizing the overflow feature in conjunction with a specified height

Take a look at this image, the overflow:hidden property is not working as expected and some text is still visible that I want to hide without adjusting the height. How can I achieve this? Focusing on the highlighted area in Red, it is causing irritation. ...

htmlcssoverflow

Struggling to get the Hover feature on Link from Material-UI to function properly

I've been attempting to hover over Link from Material UI, but unfortunately, it's not working as expected. The CSS styles are not being applied for some unknown reason, and I can't seem to figure out why. Additionally, the Button class is al ...

cssreactjsmaterial-ui

Would you like to place some text within a content box?

I am facing a challenge where I want to insert content into a contentbar that has an opacity of 0.6. However, I do not want the content (such as text or videos) to have the same opacity as the contentbar. I attempted to place them in separate div tags with ...

htmlcss

Troubleshooting: Android compatibility issues with dynamic source for HTML 5 video

My HTML5 video with dynamic source loaded using JavaScript is functioning properly in a web browser but encountering issues within an Android PhoneGap build application. Take a look at the code snippet below: JavaScript code: $('#video_player' ...

javascriptandroidhtmlphonegap-build

Enlargen div or unordered list according to content exceeding limits

What is the best way to ensure a div expands when it contains a lot of content? Code Example (HTML): <div class="content"> Content goes here <br /> Content goes here <br /> Content goes here <br /> Content goes her ...

jqueryhtmlcssxhtml

Listening for events on a canvas positioned beneath another element

I am currently dealing with an issue where I have a mouse move event listener set up on my canvas element. However, there is a div placed on top of the canvas with a higher z-index, which contains some menu buttons. The problem arises when I want the mous ...

javascripthtmlcanvas

Run Javascript code if a specific CSS class is present on an element

Whenever a user enters an incorrect value into a textbox on my page, an error message is displayed within a div with the class 'validation-errors'. I'm looking for a solution to trigger a javascript function (which adds a CSS property to a ...

javascriptjqueryhtmlcssasp.net-mvc

Troubleshooting a Label Overlapping Problem in Materialize CSS

I've been working on a Materialize project and encountering an issue with pre-filled values in text boxes. Here is a snapshot of the problem: https://i.stack.imgur.com/u13jT.png <div class="input-field col s12 m6"> <input class="" id="us ...

htmlcssmaterialize

Toggle class to a div upon clicking menu item

Seeking assistance with jQuery to develop a video player featuring a sub menu for displaying various content options upon selection. Here is a snapshot of the frontend design: view image Upon clicking on 'video' or 'audio', a distinct ...

javascriptjqueryhtmlcss

My element is not being animated by Elementbyclass

Without Using JQUERY The animation I'm trying to create isn't functioning properly. I attempted to utilize document.getElementsByClassName, but it's not working as expected. There are no errors, but the element is not animating correctly. ...

javascripthtmlcssdom

adjust the div's position based on the window's scrolling bars

Is there a way to make my div move down when the window scrolls down and up when the window scrolls up? How can I achieve this effect? ...

htmlcsspositioning

Tips for automatically closing one element when another is clicked

My goal is to create a menu that displays when I click on a link, and if another menu is already open, it should close before displaying the new one. Essentially, I want to achieve an accordion menu where only one menu is open at a time. However, despite m ...

javascriptjqueryhtml

How come my DHTML navigation bar is displaying incorrectly in Internet Explorer 7?

This particular issue has me completely baffled. Normally I can navigate through most IE7 CSS bugs with some clever adjustments here and there, but this one has really stumped me! Take a look at the example page in IE7 and you'll notice that when hov ...

cssmenuinternet-explorerdrop-down-menudhtml

Retrieve the value of a dynamically generated input element within a form object

I'm trying to figure out how to reference a dynamic 'name' of an input element in a form. Can anyone help? Here's an example using HTML: <form> <input type="text" name="qty1" value="input1" /> <input type="text ...

javascripthtmlforms

Ensure that the method is passed a negative number -1 instead of the literal number 1 from an HTML error

This is an example of my HTML code: <button (mousedown)="onMouseDown($event, -1)"></button> Here is the TypeScript code for handling the mouse down event: onMouseDown(e: MouseEvent, direction: 1|-1) { this.compute.emit(direction); ...

htmlangulartypescript

Determine if an option is chosen in multiple select elements using Vanilla JavaScript

In order to determine if a checkbox is checked, we use the following code: let isChecked = event.target.checked But what about multiple select options like the example below? <select name="books[]" multiple> <option value="A">A</option& ...

javascripthtmlhtml-selectdom-eventsmultiple-select

Utilizing reusable styled components with pseudo elements and advanced logic

How can I make the shared style more dynamic by changing the value of left or width based on a passed value or boolean logic across different components? I prefer not to pass it as a prop in the actual component like <bar left="20" />, but ...

cssreactjsstyled-components