pure css arrow help

Question

The image below describes the issue. I am creating our comment forms. And want to create the pointer arrow in ffffff background color, and a border of 1px aaaaaa and border bottom fff so it sits comfortably on our container div

The issue I have is I can make a solid color pointer, but not sure if I can make what I want, so thought I would ask here please.

enter image description here

The css for the pointer is:

div.comment-reply .arrow{
border-bottom: 8px solid #888;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
height: 0;
left: 30px;
line-height: 0;
position: absolute;
top: -8px;
width: 0;

}

sandeep · Accepted Answer · 2011-06-27 12:13:49Z

3

@422; you can do with css like this rotate property.

css

#C{
    height:200px;
    width:200px;
    background:red;
    border:1px solid #000;
    position:relative;
    }

.arrow{
     height: 20px;
     width: 20px;
     margin-left:30px;
    margin-top:-11px;
    background:red;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    position:absolute;
    bottom:-10px;
    left:20px;
}

html

<div id="C"><span class="arrow"></span></div>

you can use :after, :before instead of span.

for IE you can use ie filter

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

CHECK THIS http://jsfiddle.net/sandeep/Hec3t/7/

edited Jun 27, 2011 at 12:13

answered Jun 27, 2011 at 11:37

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Michael Mior Over a year ago

Noe that -moz-transform-rotate is a browser-specific extension.

Starx Over a year ago

I didn't knew arrows can be made from CSS. (+1) Thanks

meo Over a year ago

you could add the filter for IE to.

Shauna Over a year ago

@Michael - Technically, it's not an extension, as CSS transforms are standard as of CSS3. The standard variant just isn't finalized enough yet to not have to use vendor prefixes. w3.org/TR/css3-2d-transforms

422 Over a year ago

As an aside for those, looking at pure css spech bubbles, found this link: nicolasgallagher.com/pure-css-speech-bubbles/demo Not something we need, but interesting nonetheless

|

No Results Found · Accepted Answer · 2011-06-27 11:42:49Z

1

Using some :before and :after magic, I was able to create this with the following code:

<div class="comment">
    <div>
        <p>Here is a comment</p>
    </div>
</div>

__

.comment div:before {
    content:"";
    border:10px solid transparent;
    border-bottom-color:#ccc;
    width:0px;
    height:0px;
    display:block;  
    position:absolute;
    top:-10px;
    left:21px;
}
.comment div:after {
    content:"";
    border:12px solid transparent;
    border-bottom-color:#fff;
    width:0px;
    height:0px;
    display:block;  
    position:absolute;
    top:-10px;
    left:19px;
}
.comment {
    position:relative;
    margin:10px;   
    padding:10px;
}
.comment div {
    padding:1em;
    border:1px solid #ccc;   
}

It's not perfect, but it avoids the need for an empty tag to contain your arrow.

Demo: http://jsfiddle.net/yGsKd/2/

answered Jun 27, 2011 at 11:42

No Results Found

103k38 gold badges199 silver badges232 bronze badges

4 Comments

No Results Found Over a year ago

This looks nice in IE8 and Chrome, but I think FF needs a little tweaking.

422 Over a year ago

haha cool, yeah thats a shame huh. Gives a double line appearance in ff. Good effort thanks

No Results Found Over a year ago

I'm sure it could be fixed for FF, I just didn't put the time into it - I just whipped it up in a couple minutes. Looks pretty much perfect in IE8 which is a surprise :)

422 Over a year ago

lol yeah it does . Are we trying to say IE is complying for a change lololol Cheers bro ^5

Collectives™ on Stack Overflow

pure css arrow help

2 Answers 2

8 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related