CODEWITHSUNDEEP
htmlcss
ImadBakir
ImadBakir

Reputation: 553

Trim a small empty triangle on top of a div

I'm trying to make a drop down menu, without any images, Pure CSS and HTML like the following: enter image description here

What I'm not able to do is make this little Triangle shaped trim on Top

is it possible in CSS, if it is, how?

Upvotes: 4

Views: 1932

Answers (2)

Denys Séguret
Denys Séguret

Reputation: 382284

Here's a solution with borders :

Result :

enter image description here

HTML :

  <div id=a></div><div id=b></div>  
  <div id=c></div>

CSS :

#a {
  border-right: 5px solid white;
  border-bottom: 5px solid black;
  width: 100px;
  display: inline-block;
  margin:0;
}
#b {
  border-left: 5px solid white;
  border-bottom: 5px solid black;
  width: 100px;
  display: inline-block;
  margin:0;
}
#c {
   background: black; height:20px;width:210px
}

Tests

And here's a picture that will probably suffice to explain how it's made and how you can easily use this kind of border trick :

enter image description here

(the code to make it)

Upvotes: 3

JSuar
JSuar

Reputation: 21091

Live Example: http://jsbin.com/owafod/1/

I used CSS triangle generator to create the triangle.

#Nav { 
  width: 300px;
  height: 200px;
  background: #333;
}

#Triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
    margin: 0 auto;
}

Upvotes: 5

Related Questions