CODEWITHSUNDEEP
css
Thomas
Thomas

Reputation: 34208

div element with arrow

I'm trying to show a div element which has an indication arrow pointing to the top right. I'm using CSS and HTML. I cant seem to sort out the CSS correctly. Note: I don't want to use any images just pure code.

Any help would be much appreciated. thanks

Upvotes: 0

Views: 3660

Answers (2)

Sotiris
Sotiris

Reputation: 40096

you can use position:relative to move a div in a specific position example code:

html

<div class="wrapper">
  <div class="arrow"></div>
</div>

css

.wrapper {
    background-color: green;
    height: 200px;
    width: 250px;
}
.wrapper .arrow {
    position:relative;
    right:0;
    height:40px;
    width:40px;
    background:#03F;
}

live example: http://jsbin.com/iviha4

Upvotes: 1

Vlad.P
Vlad.P

Reputation: 1464

<style>
.arrow {
 float: right;
 width: 0;
 height: 0;
 border-color: #fff #fff #000 #fff;
 border-style: solid;
 border-width: 0 15px 20px 15px;
}
</style>

<div class="arrow"> </div>

Upvotes: 1

Related Questions