标题中的背景五边形答案

【问题标题】：Background Pentagon in Header标题中的背景五边形
【发布时间】：2018-08-04 15:03:36
【问题描述】：

我需要为我的页眉创建一个背景五边形。为了做到这一点，我： 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>

【问题讨论】：

这里有一堆方法：stackoverflow.com/questions/19255296/…
@sheriffderek，问题在于伪元素甚至无法正常工作。我试过了。一定是因为我的标题的结构？
'不工作'对于学习 CSS 的人来说不是一个好的态度。计算机只能做你描述的事情，所以 - 你没有正确描述它。 ; )
我的意思是它使背景的外观保持不变。它看起来仍然像一个矩形。

标签： html css sass

【解决方案1】：

你可以像这样使用多个线性渐变：

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

【讨论】：

【解决方案2】：

对于禅园，你想真正熟悉伪元素。这是一个例子：https://jsfiddle.net/sheriffderek/3ykb2k3k

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

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

这里有很多想法：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

【讨论】：

在这种情况下，如果我们可以简单地将渐变和背景直接应用于元素，为什么还要使用伪元素？
因为我知道他正在学习 CSS，这是一种更广泛的技术，适用于渐变无法使用的情况。它将更加普遍 - 特别是如果 OP 试图拉出一个禅宗花园页面。这就像制作一个只做一件事的 JavaScript 函数——但只能在严格的条件下工作。如果渐变需要动画位置怎么办？如果梯度需要变成独角兽飞到法国怎么办？你的渐变能做到吗？
问题是你放了一个代码来向他展示如何使用伪元素[我们可以通过在网络上分享成千上万的链接轻松地做到这一点]，但答案的目的是不是提供一个广泛的答案，而是为他的问题提供具体的答案.. 那么为什么不简单地使用伪元素来创建他的布局呢？而不是说“你可以用伪元素做到这一点，但我不会告诉你如何......”

【解决方案3】：

另一种方法是简单地使用 clip-path 像这样的 css 属性

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

希望对你有帮助！

【讨论】：