I am looking to create a CSS triangle shape for a background, but I am unsure of how to achieve this or if it is even possible.
Ultimately, I want the menu to resemble the image linked below:
While I have come across methods to create the desired shape, I am struggling to fit text inside it...
I'm simply wondering if it's feasible to accomplish this using just HTML and CSS without relying on images, and whether a triangle shape is the right choice.
Beneath this menu, there should be another <div> with a yellow background that is connected to the menu to form one cohesive shape.
Thank you in advance for any responses and advice provided.
PS: fiddle
I am attempting to position "homepage" on the left side, but I am feeling lost...
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>