CODEWITHSUNDEEP
css
Regual
Regual

Reputation: 377

issues with css triangle just around the box

I am using the following code and want to add a triangle either in the css3 format or the image based

here is my css

<div id="middleMenu">
  <span class="selected">
    <a href="#" class="text traingle">View Stuff</a>
  </span>
  <span class="text">
    <a href="#">View Gnen</a>
  </span>
</div>

Here is the css for the above 

#middleMenu {
  position: absolute;
  width: 300px;
  margin: 84px 40%;
  padding-top: 5px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  vertical-align: middle;
}
.traingle {
  background: url(../images/arrow.png) no-repeat;
  top: 31px;
  left: 15px;
  position: relative;
  text-indent: -9999px;
}
#middleMenu span.selected {
  background: url(../images/middleMenu.png) repeat;
  color: white;
  padding-top: 14px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 14px;
}
.text {
  top: 10px;
}
#middleMenu span {
  color: white;
  padding-top: 14px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 14px;
}

files added which help generating the arrow key

arrow

middle menu

Upvotes: 0

Views: 40

Answers (1)

Justin
Justin

Reputation: 4940

You can create a triangle in CSS like so:

#Triangle pointing upwards
.div {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000;
}

#Triangle pointing downwards

.div {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;

}

jsfiddle.net/dPB75/2

I'm sure you can see where this is going to create one facing left or right.

You can change the size of the triangle by the width of the borders.

Also, you misspelled triangle

Upvotes: 1

Related Questions