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>