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 */
}
Related
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 using border-top and border-left on a zero-width element to create a triangle.
.triangle {
border-top: solid 100px red;
border-left: solid 100px blue;
width: 0;
margin: 10px;
}
.borderRadius { border-radius: 10px; }
<div class="triangle"></div>
<div class="triangle borderRadius"></div>
However if a border-radius is applied to the element, the red border turns blue!! See JSfiddle here: https://jsfiddle.net/brentonstrine/3z3gqwts/
What is happening here? Is there a way to get a rounded-corner on my triangle?
To get a rounded border on your triangle you might have to declare all borders:
div {
border-top: solid 50px red;
border-right: solid 50px red;
border-left: solid 50px blue;
border-bottom: solid 50px blue;
width: 10px;
height: 10px;
}
DEMO
I want to create menu where I need a feature like if any user hover the menu there will be a border and the border bottom only. I want to display the bottom border like trapezoid.
In my case i don't have a div for border, its only border-bottom.
Here is what I've tried:
#myDiv{
background: #FED;
border-bottom: 5px solid red;
}
<div id="myDiv">
My div, I want to make my border bottom like trapezoid.
</div>
How can I achieve this?
If I get your correctly, you want to set the border shaped as triangle trapezoid after #myDiv. This is basically how you can do it with css..
#myDiv:after {
content: "";
display: block;
border-left: 1vw solid transparent;
border-top: 10px solid red;
border-right: 1vw solid transparent;
}
<div id="myDiv">
My div, I want to make my border bottom like triangle.
</div>
#myDiv {
position: relative;
display: inline-block;
}
#myDiv:after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
left: 50%;
position: absolute;
margin-left: -10px;
bottom:-20px;
display: none;
}
#myDiv:hover {
border-bottom: 3px solid #f00;
}
#myDiv:hover:after {
display: block;
}
<div id="myDiv">
My div, I want to make my border bottom like triangle.
</div>
#myDiv {
position: relative;
display: inline-block;
}
#myDiv:after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
left: 50%;
position: absolute;
margin-left: -10px;
bottom:-20px;
display: none;
}
#myDiv:hover {
border-bottom: 3px solid #f00;
}
#myDiv:hover:after {
display: block;
}
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.
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>