CSS3 Feature: Chevron-shaped banner with jagged edges

Question

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.

html css

Answer 1

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;
}

Answer 2

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;
}

CSS3 Feature: Chevron-shaped banner with jagged edges

Answer №1

Similar questions

Ways to activate the date input field and reformat it for smooth insertion or selection in mysqli

The angular content is not scrolling

The structure of the figure tag for HTML5 validation

Exploring the Breakpoints of Bootstrap 4.x Grid System in Development

Reveal and conceal grid elements upon clicking embedded links

How can I prevent scrolling while a loader is displayed during page loading?

Efficiently Organizing Data Using Coldfusion Loops in Columns and Rows

Dealing with h2 text overflowing within a bordered container

Selecting text within a parent div using JQuery

What could be causing the remove attribute API to not function properly only for the "is" attribute?

Include a hyperlink to a website that was created with the help of Photoshop

Creating collapsible items in Bootstrap

Transferring information from a form with multiple fieldsets to php

Looking for assistance with parsing out four numerical values from an HTML scrape using Python

What are the steps for transforming an HTML page into a fully-fledged Vue or React project?

Is it feasible to add to an ID using ngx-bootstrap's dropdown feature?

Is there a way to take a snapshot of an HTML Canvas frame and showcase it on a Bootstrap modal?

Designing an HTML banner with 100% width and 660 pixels in height for optimal responsiveness

Operating PHP program from html on Beaglebone Black Rev C Debian

The flying saucer fails to display images when viewing PDFs