Adding a Arrow mark to a Border through CSS

<html>
  <head>
    <style>
#bubble {
  position:absolute; 
  z-index:1;
  background: #FFD772;
  position: absolute;
  left: 50px;top: 50px;
  width: 150px;
  height: 80px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  padding:5px;
}
#arrow {
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  position:absolute;
  top:89px;
  right:20px;
  border-top: 20px solid #FFD772;
  border-left: 10px solid #FFF;
  border-right: 10px solid #FFF;
}
    </style>
  </head>
  <body>
    <div id="bubble">
Blah blah blah
      <div id="arrow"><div>
    </div>
  </body>
</html>

#arrow {
width:0;
height:0;
border-left:17px solid transparent;
border-right:17px solid transparent;
border-top:17px solid #ff0033;
margin:auto;
position:relative;
}

#arrow-inner {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-top:12px solid #cc0033;
position:absolute;
top:-15px;
left:-12px;
}

<div id=”arrow”>
<div id=”arrow-inner”/>
</div>

Advertisements
By Rz Rasel Posted in Css

One comment on “Adding a Arrow mark to a Border through CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s