Image-Less Pure-CSS Arrow Tags

image-less pure-CSS arrow tags

I create a little example may be that's you want .

CSS

div{
    padding:5px 10px;
    font-size:12px;
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0 5px 5px 0;
    float:left;
    margin-left:30px;
    margin-top:20px;
    position:relative;
    font-family:verdana;
    color:#3b3d3c;
    border:1px solid #d5d5d7;
    border-left:0;
}

div{
    background: -moz-linear-gradient( top , #fbfdfc 0%,#f6f5f5 100%);
    background: -webkit-linear-gradient( top , #fbfdfc 0%,#f6f5f5 100%);  
}

div:after{
    content:"";
     width:18px;
     height:18px;
     background: -moz-linear-gradient( left top , #fbfdfc 0%,#f6f5f5 100%);
    background: -webkit-linear-gradient( left top , #fbfdfc 0%,#f6f5f5 100%);
     -moz-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     display:block;
    position:absolute;
    top:3px;
    left:-10px;
    z-index:-1;
    border:1px solid  #d5d5d7;
}

Check this http://jsfiddle.net/9EEEP/76/

UPDATED
Now work in chrome also

http://jsfiddle.net/9EEEP/77/

For more you check my this answer also How to code certain css shapes?

I use css3 which not work in IE8 below browsers.

How to create 'greater than' arrow using CSS only?

I think background images are your only real pure-CSS option, since content isn't well-supported (or supported at all) on earlier browsers.

If you're okay with it not being a pure CSS solution, you can fake it with Javascript, but of course that violates the "using CSS only" part of your question :-) (and requires that your site visitors have Javascript enabled). For instance, using Prototype:

document.observe("dom:loaded", handleDividers);
function handleDividers() {
    $$('nearly any CSS3 selector').invoke('insert', {
        bottom: ">"
    });
}

...puts a > at the end of any element matching the selector. You could do the same with jQuery, Closure, ... I think the quasi-equivalent jQuery would be:

$.ready(handleDividers);
function handleDividers() {
    $('nearly any CSS3 selector').append(">");
}

Pure CSS Menu with Directional Arrows

If you remove the float:right and use position:absolute and make your anchor tag position:relative.

Like

.menu li > a:after { content: ' \25B7';
                     position: absolute; 
                     right:0px; 
                     top:14px;
                    }

then you can achieve what you want. Also in additional increase padding of the anchors for a better arrow positioning.

Select arrow style change

Have you tried something like this:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Haven't tested, but should work.

EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)

There is a workaround here, take a look at jsfiddle on that post.

How to Make A Chevron Arrow Using CSS?

You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after, and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the before element and rotate it using transform: rotate.

Scroll down for a different solution that uses an actual element instead of the pseuso elements

In this case, I've added the arrows as bullets in a list and used em sizes to make them size properly with the font of the list.

ul {    list-style: none;}
ul.big {    list-style: none;    font-size: 300%}
li::before {    position: relative;    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/    content: "";    display: inline-block;    /* By using an em scale, the arrows will size with the font */    width: 0.4em;    height: 0.4em;    border-right: 0.2em solid black;    border-top: 0.2em solid black;    transform: rotate(45deg);    margin-right: 0.5em;}
/* Change color */li:hover {  color: red; /* For the text */}li:hover::before {  border-color: red; /* For the arrow (which is a border) */}

<ul>    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul>
<ul class="big">    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul>

Arrow on pure CSS menu drop down that has children

Gosh, I was able to solve this just now using trial and error using the following code:

nav ul li > a:not(:last-child):after  { content: ' ▾'; }  

The thing about it is I had tried this originally and it didn't work.

nav ul li > a:not:last-child:after  { content: ' ▾'; }  

So the key is you have to use the parenthesis with the :not modifier which I was not aware. Basically the not operator did the "opposite" of what I had and poof it worked.

How can I make a pointy arrow with a div in CSS

Here is an arrow with pure CSS. Supported by all browsers. It took me less than a minute to make..

jsFiddle

.arrow {  width: 120px;}
.line {  margin-top: 14px;  width: 90px;  background: blue;  height: 10px;  float: left;}
.point {  width: 0;  height: 0;  border-top: 20px solid transparent;  border-bottom: 20px solid transparent;  border-left: 30px solid blue;  float: right;}

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

Sliding hero image off-screen with a button click?

The reason you need a checkbox rather than a button is because pure CSS doesn't record state. So even though you can make a button play an animation on click, you can't set it as "clicked" so that you can then "unclick" it.
In .slider > input:not(:checked) ~ . photo-slider you're saying "when this is not clicked, be 100px from the top. .photo-slider is less specific, so there you're saying "when the above rule doesn't apply, be 100% from the top (off the bottom of the screen". All the other attributes aren't specified in the above rule, so they'll always be applied.

To make it slide off to the right, you just need to play with where and how you list those properties. I don't know exactly how you want to position it within the rest of your page, but I think this should get you most of the way there:

.slider > input:not(:checked) ~ .photo-slider {
  left: 0px; /* This will put it hard left when unchecked, you also don't need !important, as this rule is more specific than the one below.*/
}
    
.photo-slider {
  position: fixed;
  height: 750px;
  width: 100%;
  top: 100px;
  left: calc(100% - 20px); /* this will leave 20px sticking out from the right side of the screen */
  background: url(../images/rs3-bg.jpg);
  background-size: cover;
  background-position: 75% 50%;
  transition: 0.6s;
}

You can probably also change this:

<label class="slider">
    <img class="arrow" src="images/right-arrow.png">
    <input type="checkbox" name="">
    <div class="photo-slider"></div>
</label>

To this:

<label class="slider">
    <input type="checkbox" name="">
    <div class="photo-slider">
        <img class="arrow" src="images/right-arrow.png">
    </div>
</label>

Which will keep the arrow on top of your hero image. You'll have to figure out the CSS to position it yourself, but then you could do this to change the direction of the arrow:

.slider > input:not(:checked) ~ .photo-slider .arrow {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

As for making it bounce on hover, this explains perfectly. Your CSS rule would be .photo-slider:hover.

---

Related Topics