Background Pentagon in Header

Question

I need to create a background pentagon for my page header. In order to do this, I: 1) cannot edit the html 2) am doing the styling with SASS.

How do I get the shape to appear like this wireframe image, and without transforming the text? In other words, the middle point of the pentagon must be at the bottom. Here is the compiled CSS and the HTML.

/* 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>

Here are a bunch of ways: https://stackoverflow.com/questions/19255296/is-there-a-way-to-use-svg-as-content-in-a-pseudo-element-before-or-after — sheriffderek, Feb 24 '18 at 19:43
@sheriffderek, the problem is that the pseudo elements aren't even working. I had tried that. It must be because of how my header is structured? — jr993, Feb 24 '18 at 19:50
'Not working' isn't a good attitude for someone learning CSS. The computer can only do what you describe to it, so - you aren't describing it correctly. ; ) — sheriffderek, Feb 24 '18 at 19:54
What I meant by that is that it left the appearance of the background unchanged. It still looked like a rectangle. — jr993, Feb 24 '18 at 20:06

score 3 · Accepted Answer · answered Feb 24 '18 at 19:39

You can use multiple linear-gradient like this:

/* Header */

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>

sheriffderek · Answer 2 · 2018-02-24T20:16:08.243

0

For the Zen Garden, you want to get really familiar with pseudo elements. Here's an example: https://jsfiddle.net/sheriffderek/3ykb2k3k

docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

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

Lots of ideas 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: ''; 
  /* has to have something in 'content' or :before and :after don't work */
  display: block;
  width: 100%;
  height: 200px;
  position: absolute;
  /* positioned based on closest relative parent */
  top: 0;
  left: 0;
  background: red; /* could be an image or gradient or many things */

  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);
  /* here's a fun new approach */
}

http://bennettfeely.com/clippy

edited Feb 24 '18 at 20:16

answered Feb 24 '18 at 19:49

sheriffderek

8,848
6
43
70

in this case why using pseudo element if we can simply apply the gradient and background directly to the element ? – Temani Afif Feb 24 '18 at 19:53
Because I know that he is learning CSS and this is a broader technique that will work in situations where a gradient will not. It will be more universal - especially if the OP is trying to pimp out a Zen garden page. It's like making a JavaScript function that does one thing - but only works under strict conditions. What if the gradient needed to animate position? What if the gradient needed to turn into a Unicorn and fly to France? Can your gradient to that? – sheriffderek Feb 24 '18 at 19:57
the issue is that you put a code to show him how to use pseudo-element [a thing that we can easily do by sharing a thounsand of links in the net] but the purpose of an answer is not to provide a broad answer but to provide sepcific answer to his issue .. so why not simply use the pseudo element to create his layout ? instead of saying "you can do it with pseudo element but i won't show you how ..." – Temani Afif Feb 24 '18 at 20:01

score 0 · Answer 3 · answered Feb 24 '18 at 20:30

Another way of doing this is simply use clip-path css property like this

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

I hope it helps!

Background Pentagon in Header

3 Answers3