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,
- to center it:
text-align:center
on parent. - 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
CSS Margin Strange Behavior, Why
Accessing The CSS in Browser Using Question Mark () in End
Select Every Second Element of a Series of Nested Elements (Each Has Only One Child)
CSS Animations End Together Even Though They Are Started at Different Times
CSS: Checked - Change <Td> Background
Weird Border Opacity Behavior in Webkit
CSS Drop Down - Sub Menu Color
How to Include The Box-Shadow in The Div Area That Responds to a Click Event
How to Make Rotated Elements in a Flexbox Fixed to The Right Side of a Page
Multi Level Dynamic Flyout Menu
Specifying a List of Arbitrary Children (No Pattern) for Nth-Child and Nth-Of-Type
Div Not Visible in HTML and CSS
Bootstrap Grid with Different Image Heights