Question

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

Answer 1

您可以使用多个线性渐变：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

docs：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

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

我希望它有所帮助！

在标头的背景五角大楼

3 个答案: