Can someone help me with this css issue? - css

Question

Can someone help me with this CSS issue i am having? I would like to create an HTML call out box with the arrow pointing inside the div. all the tutorials I have seen so far have the arrow pointing to the left, right, top or bottom.
I am using the example from here http://cssarrowplease.com/

Answer 1

Rotate it and also change the top, left and margin's position accordingly
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}

Answer 2

.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
margin-top:150px;
margin-left:150px;
padding:15px;
height:150px;
width:60%;
text-align:center;
line-height: 100px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid rgba(0, 0, 0, 0);
content: " ";
top: -4px;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
transform: rotate(180deg);
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #FFF;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}
<div class="arrow_box">
<h1 class="logo">css arrow please!</h1>
</div>
and here is the demo working code for this code
Demo code

Answer 3

You just have to change the position of the :before and :after pseudo-elements:
http://jsfiddle.net/7nmtgoqo/2/
typically arrow right in this generator has a style rule left:100%; and :after has a border-color that matches the div background. if you update the values for left and top it will move the arrow around while keeping it's shape...in the fiddle I've commented the css lines I updated from the cssarrowplease generated styles.

Answer 4

I believe you can get your requirements done by this simple code:
<style>
.outerDiv{
width:100px;
height:100px;
background:red
}
.inwardArrow{
margin:0 auto;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid white;
}
</style>
<div class="outerDiv">
<div class="inwardArrow"></div>
</div>