Pure CSS Arrow Help

pure css arrow help

@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/

how to create arrow down/up in css

My proposal is:

.triangle_down {  width: 0;  height: 0;  border-left: 15px solid transparent;  border-right: 15px solid transparent;  border-top: 15px solid #2f2f2f;  font-size: 0;  line-height: 0;  float: left;}.triangle_down1 {  position: relative;  top: -5px;  content: "";  display: inline-block;  width: 15px;  height: 15px;  border-right: 0.2em solid black;  border-top: 0.2em solid black;  transform: rotate(135deg);  margin-right: 0.5em;  margin-left: 1.0em;} .triangle_up1 {   position: relative;   top: -5px;   content: "";   display: inline-block;   width: 15px;   height: 15px;   border-right: 0.2em solid black;   border-top: 0.2em solid black;   transform: rotate(-45deg);   margin-right: 0.5em;   margin-left: 1.0em; }
<div id="dialog1" class="triangle_down"></div><div id="dialog2" class="triangle_down1"></div><div id="dialog3" class="triangle_up1"></div>

How do I create this arrow using pure CSS

Here's a first crude mockup based on your code and the css from cssarrowplease.com. Basically, it uses two CSS triangles, one a bit smaller than the other to create the arrow shape.

<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:#00FF00;
}

.arrow_box {
position: relative;
top: 50%;
}
.arrow_box:after, .arrow_box:before {
right: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow_box:after {
border-color: rgba(0, 255, 0, 0);
border-right-color: #00ff00;
border-width: 10px;
top: 50%;
margin-top: -10px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 16px;
top: 50%;
margin-top: -16px;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft"><div class="arrow_box"></div></div>
</div>

Pure CSS Tooltip with arrow

Like this?

span {  padding: 10px;  display: inline;}
[title] { position: relative;}
[title]:hover:before { background: #333; top: 100%; background: rgba(0, 0, 0, .8); border-radius: 5px; color: #fff; content: attr(title); padding: 5px 15px; position: absolute; z-index: 98; width: auto; margin-top: 10px;}
[title]:hover:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #333; content: ' '; position: absolute; top: 100%; left: 50%;}
<span class="dijitButtonContents" id="saveButton" title="Save as draft"><span id="saveButton_label">Save</span></span>

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.

Pure CSS Arrow Divs in CSS Grid

You can use linear-gradient to easily create these triangles. You can consider separate classes (like below) or use them in one element as multiple backgrounds.

#triangles {  width: 100px;  height: 100px;  display: inline-block;}
#triangles div { height: 100%;}
.tr-left { background: linear-gradient(to top left, transparent 50%, red 0) 0 100%/50% 50% no-repeat, linear-gradient(to bottom left, transparent 50%, red 0) 0 0/50% 50% no-repeat;}
.tr-right { background: linear-gradient(to top right, transparent 50%, yellow 0) 100% 100%/50% 50% no-repeat, linear-gradient(to bottom right, transparent 50%, yellow 0) 100% 0/50% 50% no-repeat;}
.tr-top { background: linear-gradient(to top right, transparent 50%, green 0) 0 0/50% 50% no-repeat, linear-gradient(to top left, transparent 50%, green 0) 100% 0/50% 50% no-repeat;}
.tr-bottom { background: linear-gradient(to bottom right, transparent 50%, blue 0) 0 100%/50% 50% no-repeat, linear-gradient(to bottom left, transparent 50%, blue 0) 100% 100%/50% 50% no-repeat;}
<div id="triangles" class="tr-left"></div><div id="triangles" class="tr-left">  <div class="tr-right"></div></div><div id="triangles" class="tr-top">  <div class="tr-right"></div></div>
<div id="triangles" class="tr-left"> <div class="tr-bottom"> <div class="tr-top"> <div class="tr-right"></div> </div> </div></div>

Setting up pure css arrows to menu with transparent or image background?

This one is easier to position and has a perfect triangle. We are still using transform rotate but no need for transform skew. No need to calculate width as well.
Fiddle here.

ul {    overflow: hidden;}li {        display:inline-block;position: relative;}ul li a {  display: block;padding:20px 15px;}ul li.selected a {  color: green;}ul.hor li.selected:before,ul.hor li.selected:after {   content: "";   bottom: 0;   position: absolute;   border-bottom:3px solid blue;   width:9999px;   margin:0 10px;left:50%;}ul.hor li.selected:after {    left:auto;right:50%;}/*vertical menu starts*/ul.ver {  width: 200px;}ul.ver li {  display: block;}ul.ver li a {  padding:10px 15px;}ul.ver li.selected:before,ul.ver li.selected:after {   content: "";   position: absolute;   top:50%;   right: 0;   border-right:3px solid blue;   height:9999px;   margin:10px 0}ul.ver li.selected:after {    top:auto;bottom:50%;}
/*arrow starts*/ul li.selected a:after { content: ""; width: 15px; height: 15px; position: absolute; border: solid blue; border-width: 3px 3px 0 0; }
ul.hor li.selected a:after { top:100%; left: 0; right: 0; margin: -10px auto 0; -moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); -ms-transform: rotate(315deg);}ul.ver li.selected a:after { left:100%; margin-left:-10px; -moz-transform:rotate(225deg); -webkit-transform:rotate(225deg); -ms-transform:rotate(225deg);}body { width:90%;margin:20px auto; background: rgb(229, 180, 230);background: -moz-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);background: -webkit-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);background: -o-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);background: -ms-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);background: linear-gradient(120deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);}
<ul class="hor">     <li><a href="#">Lorem</a></li>     <li class="selected"><a href="#">Ipsum</a></li>     <li><a href="#">Sit amet</a></li>     <li><a href="#">Consectetur</a></li> </ul><br> <ul class="ver">     <li class="selected"><a href="#">Lorem</a></li>     <li><a href="#">Ipsum</a></li>     <li><a href="#">Sit amet</a></li>     <li><a href="#">Consectetur</a></li> </ul>

Menu triangle/arrow issue (pure CSS)

Try setting display to inline-block for your .arrowsprite rule. See this fiddle for an example.

.arrowsprite {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #444444;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
display:inline-block;
}

It's working for me in Chrome 14.0.803.0 dev.

Create Up and Down arrow icons or buttons using pure CSS

If you set pseudo to display:inline-block (or any other values but inline.) you can size it.

Then,

  1. to center it: text-align:center on parent.
  2. To vertical-align it : line-height:20px (25px -5px wich is half of the height of pseudo element) and set : vertical-align:middle to pseudo element:

DEMO

.positionCameras ul, .positionCameras li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
vertical-align:top;/* UPDATE*/
}
.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
width: 25px;
height: 25px;
cursor: pointer;
background: #cccccc;
margin: 5px;
border-radius: 5px;
border: 1px solid #aaaaaa;
box-shadow: 1px 2px 15px #cccccc;
text-align:center;/* UPDATE*/
line-height:20px;/* UPDATE*/
}
.positionCameras li.cameraLeft:before {
content:"";
display:inline-block;/* UPDATE*/
width: 0;
height: 0;
vertical-align:middle;/* UPDATE*/
border-style: solid;
border-width: 0 5px 10px 5px;
border-color: transparent transparent #007bff transparent;
}
.positionCameras li.cameraIcon {
cursor: default;
}
.positionCameras li.cameraRight:before {
width: 0;
height: 0;
border-style: solid;
border-width: 8.7px 5px 0 5px;
border-color: #007bff transparent transparent transparent;
}


Related Topics



Leave a reply



Submit