背景五角大楼在标题
我需要为我的页眉创建一个背景五角大楼。为了做到这一点，我：1）无法编辑html 2）正在使用SASS进行样式设置。
如何使形状看起来像此线框图像，而不转换文本？换句话说，五角大楼的中点必须在底部。下面是编译后的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>共有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%);
}
我希望这有帮助！
对于禅宗花园，你想真正熟悉伪元素。这是一个例子：https://jsfiddle.net/sheriffderek/3ykb2k3k
文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
<header>
<!-- no markup change... -->
</header>
这里有很多想法：有没有办法在伪元素中使用SVG作为内容：before或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
您可以使用多个线性梯度，如下所示：
/* 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>-
本文向大家介绍用C ++查找五角大楼区域的程序，包括了用C ++查找五角大楼区域的程序的使用技巧和注意事项，需要的朋友参考一下 在本教程中，我们将讨论一个寻找五边形区域的程序。 为此，我们将获得平行四边形的侧面。我们的任务是计算并打印出给定五边形的面积。 示例 输出结果
-
有时在我的实践中，我想圆视图的背景角。通常我会用这样的(@drawable/bg_rounded) 但有时我只需要舍入一个角度，并以编程方式完成 我创建了一个测试项目来显示问题。activity_main.xml 主活动类可能类似于 但是意想不到的行为发生了-角落不是圆的点击查看图片 如果我使用背景。转弯半径：可以预测 点击查看图片 所以我的问题是:我应该用什么来实现不同圆角半径的动态调整
-
问题内容： 我正在尝试创建一些网站模板来帮助我提高前端开发技能，因为我目前在后端工作上要好得多。 我试图在某种程度上复制我自己的网站的样式，这是一个简单的Bootstrap模板。但是，我不想在标题中使用静态照片，而是将其替换为Youtube视频。我首先减少了网站中使用的模板，然后将其减少到我认为不破坏标题的程度。 我在附近找到了一些代码，以显示如何将Youtube视频设置为整个页面的背景，而不是页
-
问题内容： 在html模板中，我具有带有动态图像的这种样式： 可以在网络浏览器和android浏览器中使用。但是，使用“ style =”动态显示的背景图像不会在iPad上显示。 我总是可以使用img标签创建动态图像，但是我正在寻找iPad的样式/ css解决方案。 问题答案： 改用 要么
-
我正在使用itext 4.2 java生成pdf，希望有圆角和背景色，我也能做到这一点。我面临一个问题，第一列是单独获取圆角和背景的，所以为了修复它，我需要在表中添加一个包含总列数的空行，添加后，表显示正确的圆角和背景。 我现在面临的问题是，pdfptableevent没有正确地应用于多个页面。表有许多记录，它在多个页面上进行拆分，其行为只是行的第一列被其背景色取整。其余的列并没有应用pdfpta
-
我有一个angular项目，其中有一个大的背景图像，填充页面，还有一个简单的侧边栏，其中包含链接，单击后，会将背景的url更改为另一个图像（来自cdn）。由于这些图像相当大，需要一两秒钟才能加载，这很明显，我想添加一个预加载程序，但我不确定如何在angular 2中完成。 在我的html中，我有这个: 变量urlImage填充在组件的构造函数中，侧栏链接在单击时用一个简单的函数改变它的值，如下所示