Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes.

Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, while keeping the text untransformed? Below is the compiled CSS and HTML code snippets for reference.

/* Header */
header {
  background-color: #000000;
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>

<link rel="stylesheet" media="screen" href="style.css?v=8may2013">
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">


<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>

<!--



View source is a feature, not a bug. Thanks for your curiosity and
interest in participating!

Here are the submission guidelines for the new and improved csszengarden.com:

- CSS3? Of course! Prefix for ALL browsers where necessary.
- go responsive; test your layout at multiple screen sizes.
- your browser testing baseline: IE9+, recent Chrome/Firefox/Safari, and iOS/Android
- Graceful degradation is acceptable, and in fact highly encouraged.
- use classes for styling. Don't use ids.
- web fonts are cool, just make sure you have a license to share the files. Hosted 
  services that are applied via the CSS file (ie. Google Fonts) will work fine, but
  most that require custom HTML won't. TypeKit is supported, see the readme on this
  page for usage instructions: https://github.com/mezzoblue/csszengarden.com/

And a few tips on building your CSS file:

- use :first-child, :last-child and :nth-child to get at non-classed elements
- use ::before and ::after to create pseudo-elements for extra styling
- use multiple background images to apply as many as you need to any element
- use the Kellum Method for image replacement, if still needed.
- don't rely on the extra divs at the bottom. Use ::before and ::after instead.


-->

<body id="css-zen-garden">
<div class="page-wrapper">

<header role="banner">
<h1>CSS Zen Garden</h1>
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</header>


</body>
</html>

htmlcsssass

Answer №1

There is an option to utilize multiple linear gradients in the following way:

/* Styling for Header Element */

header {
  background:
  linear-gradient(#000,#000)0 0/100% calc(100% - 70px) no-repeat,
  linear-gradient(to bottom left,#000 50%,transparent 51%)0% 100%/50.5% 70px no-repeat,
  linear-gradient(to bottom right,#000 50%,transparent 51%)100% 100%/50% 70px no-repeat;
  color: #ffffff;
  width: 100%;
  padding-bottom:50px;
  text-align: center;
}
<header role="banner">
  <h1>CSS Zen Garden</h1>
  <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</header>

Answer №2

To master the Zen Garden, it's essential to become well-acquainted with pseudo elements. Check out this example: https://jsfiddle.net/sheriffderek/3ykb2k3k

Refer to the documentation for more insights: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

<header>
  <!-- no markup change... -->
</header>

For further inspiration, explore different concepts mentioned here: Is there a way to use SVG as content in a pseudo element :before or :after

header {
  min-height: 300px;
  background: gray;

  position: relative; /* to create a boundary for the absolute children */
}

header:before {
  content: ''; 
  display: block;
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;

  background-image: url('https://am23.akamaized.net/tms/cnt/uploads/2015/04/Revenge-of-the-Nerds-1984-revenge-of-the-nerds-11710197-950-534.jpg');
  background-size: cover;

  -webkit-clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
  clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
}

Discover a cool tool at

Answer №3

One alternative method to achieve this effect is by utilizing the clip-path css property in the following manner:

header {
      background-color: #000000;
      color: #ffffff;
      width: 100%;
      height: 100%;
      text-align: center;
      padding:60px 0;
      clip-path:polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
    }

Hopefully this solution proves helpful!

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

Get rid of the lower padding on a handsontable

I am currently using either Chrome Version 61.0.3163.100 (Official Build) (64-bit) or Safari Version 11.0 (12604.1.38.1.7) on Mac OS Sierra 10.12.6. I am looking to create a handsontable that may exceed the screen height: Click here for an example As I ...

cssheightmarginhandsontable

Tips for modifying a particular element within a class?

I am seeking guidance on how to modify a specific class attribute in CSS/JS/JQuery when hovering over a different element. Here is an example: <h1 class="result">Lorium</h1> <h1 class="result">Ipsum</h1> <h1 class="result">Do ...

javascriptjqueryhtmlcss

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...

cssnext.jstailwind-cssnextjs-image

Conceal the element at all times

I'm facing a challenge with a paragraph element that is dynamically filled with content using Javascript. I need to hide the element whenever it doesn't have any text within it. However, I want to avoid using setTimeout or setInterval for this ta ...

javascriptjquerycsshtml

Retrieving PHP information in an ionic 3 user interface

We are experiencing a problem with displaying data in Ionic 3, as the data is being sourced from PHP REST. Here is my Angular code for retrieving the data: this.auth.displayinformation(this.customer_info.cid).subscribe(takecusinfo => { if(takecusi ...

phphtmlangulartypescriptionic3

Use JavaScript to convert only the initial letter to uppercase

Once again, I am in the process of learning! Apologies for the simple questions, but learning is key... Attempting to implement a trick I found online to change all letters to uppercase, I am now trying to adjust it to only capitalize the first letters. T ...

javascripthtmlcss

Alter the color scheme of a paragraph using PHP

I have been working on creating a management panel for a website. My first step was to include an input field to collect a color value: <form> <input type="text" name="test"> <input type="submit" value="Send"> <?php $color = $_REQ ...

phphtmlcss

Convert XML data into a structured table format

We have an XML file named "servers.xml" that needs to be parsed. This file is located on the same server where we want it to be parsed, in the same folder. <root> <list> <server> <server name="28 Disconnects La ...

javascriptajaxxmlhtmldom

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

htmlangularnavigationnavbar

A compilation of approved classes for the quill toolbar

The instructions provided in the documentation for the quill module indicate that you can manually create a toolbar using HTML, and then pass the corresponding DOM element or selector to Quill. This will result in the ql-toolbar class being added to the to ...

javascripthtmlquill

I'm having trouble figuring out how to remove an unexpected blank space that appears after the <li> element in a basic drop-down menu code. Can

Why is the browser (Mac Chrome + Firefox) adding extra space after my simple CSS drop-down menu where I have a hidden sub-menu? Check out the code below: <ul> <li>Option Zero</li> <li>Option One Is Longer</li> &l ...

cssdrop-down-menu

What is the best way to showcase the information stored in Firestore documents on HTML elements?

Currently in the process of designing a website to extract data from my firestore collection and exhibit each document alongside its corresponding fields. Below is the code snippet: <html> <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlfirebasegoogle-cloud-firestore

What is the process for adjusting the font in my VS Code editor?

Currently diving into an Angular2 development video course, I stumbled upon something intriguing: https://i.stack.imgur.com/CIBcx.jpg Yes, aesthetically pleasing HTML attributes won't make me a coding genius. But let's be honest, who doesn&apos ...

htmleditorvisual-studio-codecode-formatting

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

Eliminating shadow effects caused by excessive scrolling on Android browsers and Cordova platforms

Mysterious Scroll Shadow Issue My webpage is displaying a shadow when I scroll too far up or down. I am using Cordova to show my HTML, but I have noticed this problem on other sites in the Chrome browser as well. Could this be a CSS property causing the i ...

htmlcsscordova

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

Arrange the HTML elements in a line, one following the next

I need assistance with aligning two dropdown lists in the jsbin provided. How can I position them one after the other, center them on the page, and ensure there is enough space between the two elements without manually adding spaces using   In additi ...

htmlcsstwitter-bootstrap

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

csscenter

Issues with toggling the menu on Angular 14 using Bootstrap 4.6

I am struggling with implementing a menu on the header section of my Angular 14 homepage. The menu I added is not opening as expected. Even after trying various working menu samples from the internet, I couldn't get it to work in my project. Here are ...

htmlangulartwitter-bootstrapbootstrap-4angular14

problem with the height of the side navigation bar

Currently, I am in the process of creating a back-end system that includes a side navigation bar positioned on the left-hand side. To accomplish this, I have opted to utilize the Bulma CSS framework and integrate it with Laravel. Although I have implemen ...

htmlcss