我需要为我的页眉创建一个背景五边形。为了做到这一点，我: 1)无法编辑html 2) 我正在使用 SASS 进行样式设计。
如何让形状看起来像 this wireframe image ，并且不转换文本？换句话说，五边形的中点一定在底部。这是编译后的 CSS 和 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>最佳答案
您可以像这样使用多个线性渐变:
/* 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>关于html - 页眉中的背景五边形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48966786/