个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想使用 css 三 Angular 形作为背景的形状，但我不知道该怎么做或是否可行。
最后它应该是一个如下图所示的菜单。
http://i59.tinypic.com/4gitzq.png
我找到了一些制作形状的方法，但我无法将文本放入其中...
我只需要知道是否可以通过使用没有图像的 html 和 css 来获得它，以及三 Angular 形是否是正确的选择。
这个菜单下应该是另一个<div>黄色背景连接到菜单，所以它会形成一个形状。
非常感谢您的所有回复和建议。
附言: fiddle
我想在左侧找到“主页”，但我迷路了...
body {
background-color:
}
.shape {
width:960px;
margin:0 auto;
}
.top {
}
.bottom {
width: 960px;
height: 50px;
padding-top: 25px;
font-family: 'Source Sans Pro', sans-serif;
color: #f1c40f;
text-align: right;
background: #f1c40f; /* Old browsers */
background: -moz-linear-gradient(4.5deg, #f1c40f 50%, #1c2228 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(50%,#f1c40f), color-stop(50%,#1c2228)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(4.5deg, #f1c40f 50%,#1c2228 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(4.5deg, #f1c40f 50%,#1c2228 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(4.5deg, #f1c40f 50%,#1c2228 50%); /* IE10+ */
background: linear-gradient(4.5deg, #f1c40f 50%,#1c2228 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1c40f', endColorstr='#1c2228',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.bottom a.special {
text-align: left;
padding:100px;
color: red;
}
.bottom a, a:link, a:visited, a:hover {
color:#f1c40f;
background-color:transparent;
text-decoration:bold;
}
.bottom a, a:active {
color:#f1c40d;
background-color:transparent;
text-decoration:none;
}<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,700,200italic,400italic,600italic,700italic&subset=latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bottom">
<a class="special">Homepage</a>
<a href="">About</a>
<a href="">Works</a>
<a href="">Contact</a>
</div>
</body>
</html>最佳答案
关于html - <div> 在背景中带有 css 三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30766257/
25
4
0
我正在尝试创建带有固定三 Angular 形导航的网页。 问题是我无法将较小的三 Angular 形放入大三 Angular 形中，如下图所示。 当调整窗口大小时三 Angular 形正在改变它的 A
我目前正在使用 Angular-material，但我在另一个项目中遇到了一种情况，迫使我使用类似 angular material chips 的东西。效果如本链接所述。 对我来说主要的麻烦是我想在
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 6 年前。 Improve this ques
我通过将一个正方形旋转 45 度创建了一个菱形: .shape { height: 50px; width: 50px; transform: rotate(45deg); } 是否
我使用 css 创建了一个三 Angular 形: .box { width: 0; height: 0; border-style: solid; border-width: 540px 964px
如何创建边框三 Angular 形？ 我唯一能想到的就是做一个三 Angular 形 .triangle { width: 0; height: 0;
我想创建一个旋转函数，在该函数中我的三 Angular 形可以像轮子一样自行旋转，但我与移动三 Angular 形的部分代码发生冲突，我尝试了许多解决方案但没有成功，也许如果你们中的一个人知道它会对人
我正在使用线性垫步进器。 它与 next 一起工作正常。我进行 api 调用，如果成功，则调用 stepper-next 事件而不是使用 matStepperNext 指令。 现在，当用户在第 1 步
我想根据用户的 onClick 事件将 V 形从 down 更改为 up。我尝试过使用其他人的其他示例，但没有成功。 这是我的JSFiddle . 最佳答案 嗯，您的 JSFiddle 设置存在一些问
我想在鼠标单击的地方绘制一个 2D 三 Angular 形。已经制作了鼠标事件处理程序，并且可以看到鼠标单击的点。我在缓冲区对象中写入了三 Angular 形的顶点位置。它将是三 Angular 形大
有人可以告诉我我在 Javascript 中的帕斯卡三 Angular 形上做错了什么吗？我看到一个已经存在的使用递归的线程，但是，在没有逐字复制的情况下，在我看来，代码看起来太相似，无法破译我做错了
我必须为我的类(class)使用星号制作一个三 Angular 形和倒三 Angular 形。 我已经制作了上半部分，但是，我在制作上下颠倒的部分时遇到了很大的麻烦 for(var count=1;
我想获取围绕一个点的三 Angular 形的点，其中面指向指定法线的方向。我将使用 THREE.js 将它们添加到 BufferGeometry。 非常粗略的绘图: 这是我到目前为止的代码: //Th
我从编程开始。我正在使用 JavaScript。 为了练习，我打印了一个像这样的三 Angular 形: * ** *** **** ***** 但我想从右向左打印，如下所示: * **
我需要在 Joint JS 中创建一些以圆形源开头并以三 Angular 形结尾的链接，反之亦然，得到了这个，但它不起作用: var link1 = new joint.dia.Link({
这个问题已经有答案了: 奥 git _a (1 个回答) 已关闭 6 年前。 我做了一些安静的搜索，发现了很多将星星和其他形状输出到无数图案中的方法，但我还没有找到任何关于如何使用用户生成的短语来做到
我正在尝试仅使用递归打印出字母 V 的形状。我在这个网站上看到了一些与我的问题相关的代码，但大多数使用循环而不是递归。 这是我的代码: public class Pattern { pub
这个问题在这里已经有了答案: How to Make A Chevron Arrow Using CSS? (10 个答案) 关闭 7 年前。 我想给this triangle中间略有下降，我不想要
我的问题是关于使用 Javascript 对其边进行三 Angular 形评估。以下代码是非常初始的版本，即使它可以工作。我想知道它是否可以更简化，或者有其他方法可以达到相同的结果。 谢谢! let
function makeLine(length) { var line = ""; for (var i = 1; i <= length; i++) { for (var j =
我是一名优秀的程序员,十分优秀！