Hi i try to draw something like this :
photo
using divs and css, i need to hover each area separately.
so far I've done something like this but it does not work well because it activates blocks and only two of it ;/
css :
<style type="text/css">
.arrow-up {
position : absolute;
top : 150px;
width: 150px;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid black;
}
.arrow-up:hover{
border-bottom: 60px solid red;
}
.arrow-down {
position : absolute;
top : 90px;
width: 150px;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid blueviolet;
}
.arrow-down:hover{
border-top: 60px solid red;
}
.arrow-right {
position : absolute;
top : 90px;
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right:hover{
border-left: 60px solid red;
}
.arrow-left {
position : absolute;
top : 90px;
left : 217px;
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right:60px solid blue;
}
.arrow-left:hover{
border-right: 60px solid red;
}
</style>
<html>
<body>
<div class="arrow-down"></div>
<div class="arrow-up"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</body>
</html>
any idea ?
is it possible ?
demo
Yea looks pretty good. Remove the div:hover selector and use your classes to select the elements hover. So:
.arrow-up:hover{
border-bottom: 60px solid red;
}
Will now change the colour of the 'border' to red. Hope this solves the problem
Your positioning:
CSS:
.arrowBox{
display:inline-block;
width:24%;
//for ie 5.5 to 7
float:left;
}
HTML:
<div class="arrowBox">
<!-- arrows go in here -->
</div>
Related
I am drawing 2 bars, one at 70% and the other at 100%. what I want is to have a tiny triangle pointing at 70%.
I draw my triangle like this:
.arrowUp {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
The thing is if I give left and right margins as 70% and 30% the I expect it to align with the tip at the end of the bar. But I end up with something like this:
How can I get the tip of the triangle to point at the end of the black bar?
Set a negative left margin.
.arrowUp {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
margin-left: -10px;
}
.bar1{
width: 500px;
height: 10px;
background-color: gray;
}
.bar2{
position: relative;
width: 70%;
height: 10px;
background-color: red;
}
.arrowUp {
position: absolute;
top: 100%;
right: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
<div class="bar1">
<div class="bar2">
<span class="arrowUp"></span>
</div>
</div>
I have created a div that looks like an arrow with css border.
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
Now i want to create an extra border on the right side of that div, lets say: 1px solid black
How can i do that?
hers is the fiddle: https://jsfiddle.net/wqehc9vv/4/
So it should look like this:
image preview
You can use a pseudo-element like :before for that. And make it slightly bigger than the div. Also position it accordingly. See below
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
.blue-arrow-right:before {
content:"";
position:absolute;
left:-30px;
top:-32px;
border-top: 32px solid transparent;
border-bottom: 32px solid transparent;
border-left: 32px solid black;
z-index:-1;
}
<div class="blue-arrow-right">
</div>
I'm trying to create some CSS triangles, using css and the :after pseudo class. Somehow, the up and down arrows are working properly, but the left and right arrows are being "cut off" (see fiddle: http://jsfiddle.net/K9vxN/ )
This is basically the css I'm using:
.arrow-right:after {
content:"";
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
Does anyone know why this is happening?
Make the :after pseudo element inline-block (or block). Currently it's an inline element, and it's size is based on the line height of the (empty) text it contains.
You'll have to fix some positioning then, though, but that should be trivial.
div { height:0px; }
div:after { content:""; display: block;}
.arrow-up:after {
margin-left: 50px; /* move right, to show it */
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
}
.arrow-down:after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right:after {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left:after {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
http://jsfiddle.net/K9vxN/2/
By the way, you might not need to use :after at all, but that depends on whether you want the div to have an arrow or to be an arrow. That's up to you. ;)
Simply add display: block to all your :after selectors. For example
.arrow-up:after {
display: block; /* Added this */
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
Here's a demo
Ensure the :after pseudo-element is specified as either block or inline-block, dependent upon your usage scenario.
div:after {
content:"";
display: block;
}
See http://jsfiddle.net/kFa6a/
your pseudo-element needs layout to be triggered:
you can set as display:block; or any other value of display but inline.
You can use as well float or position:absolute/fixed to trigger layout.
http://jsfiddle.net/K9vxN/5/
div:after {
content:"";
display:block;/* or table, inline-table,inline-block, but not inline*/
/* to your choice, where it suits design the best */
/* pick up here instead display*/
/*position:absolute;*//* or fixed */;
/* float:left;*//* or right */
}
It has been a long time since I built this triangle which points up. How can I alter my CSS to point the corner left?
http://jsfiddle.net/3sP8q/
.left-corner {
width: 0;
height: 0;
border-bottom: 15px solid #000;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: relative;
}
<div class="left-corner"></div>
Here is how:
.left-corner {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
<div class="left-corner"></div>
Use CSS-Tricks, it helps a lot!
It's 2013 now and im just wondering if there has come a better way to achieve this? Is there a way to do this with just one element?
div.linetop { border-top: 1px solid #111111; }
div.linebottom { border-top: 1px solid #292929; }
// make a line
<div class="linetop"></div>
<div class="linebottom"></div>
Edit
This is what happens with HR the first pixel is grey :/ (im using chrome btw dont have any other browsers):
Tried both:
hr {
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
and
hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
Edit
Solved it! Simply adding border:none before
hr {
border: none;
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
You could use the <hr> tag, and use both border-top and border-bottom:
hr {
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
The HTML is simply: <hr>.
jsFiddle here.
Possible alternative solutions:
1. CSS gradients - support info
HTML: <div class='v1'></div>
Relevant CSS:
.v1 {
background: linear-gradient(#111 50%, #292929 50%) no-repeat 50% 75%;
background-size: 80% 2px;
}
2. a :before pseudo-element & a box-shadow - support info
HTML: <div class='v2'></div>
Relevant CSS:
.v2 { position: relative; }
.v2:before {
position: absolute;
right: 10%; bottom: 20%; left: 10%;
height: 1px;
box-shadow: 0 1px #292929;
background: #111;
content: '';
}
3. :before and :after pseudo-elements - support info
HTML: <div class='v3'></div>
Relevant CSS:
.v3 { position: relative; }
.v3:before, .v3:after {
position: absolute;
right: 10%; bottom: 20%; left: 10%;
height: 1px;
background: #111;
content: '';
}
.v3:after { margin-bottom: -1px; background: #292929; }
demo
You can use <hr> tag, and use border-top and border-bottom to define you two lines color:
hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #08f;
border-bottom: 1px solid #666;
}
CSS
#hrtag {
border-bottom: green 2px solid;
border-top: red 2px solid;
}
HTML
<hr id="hrtag"/>
If you want it to be a class then just swap the # for . and id for class. In the CSS, you can change the color to whatever you want. This was tested in Chrome.
Would you try box-shadow,like this:
HTML
<div class="hr"></div>
CCS
.hr{
border-top: 1px solid #111;
box-shadow: 0 1px 0 #292929;
}
Please view the demo.