Question

我想使用css三角形作为背景的形状，我不知道该怎么做或者是否可能。

最后它应该是一个如下图所示的菜单。

enter image description here http://i59.tinypic.com/4gitzq.png

我已经找到了一些如何做形状的方法，但我不能把文字放在里面......

我只需要知道是否可以通过使用没有图像的html和css以及三角形是否正确选择来实现这一点。

在此菜单下应该是另一个<div>，黄色背景连接到菜单，因此它将形成一个形状。

感谢您的所有回复和建议。

PS：小提琴

我想在左边看“主页”，但我迷失了......

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>

Answer 1

尝试使用triangle shape的Cross浏览器技术。

跨浏览器并且不提供 pixelate 效果。

这是working demo。

<div>在后台使用css三角形

1 个答案: