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!
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>
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 7 years ago.
I have tried following css:
.triangle:after {
position:absolute;
content:"";
width: 0;
height: 0;
margin-top:1px;
margin-left:2px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
.triangle:before {
position:absolute;
content:"";
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid black;
}
As i dont want to go with the SVG, is there any alternate way to achieve this.
You can use following css:
.triangle {
width: 0;
height: 0;
border-top: 100px solid #0099ff;
border-left: 100px dashed transparent;
border-right: 100px dashed transparent;
border-bottom: 0;
display: block;
overflow: hidden;
}
You can check this demo http://leplay.github.com/demo/triangle.html
This question already has answers here:
CSS triangle custom border color
(5 answers)
Closed 7 years ago.
I have a triangle
<div class="triangle-left"></div>
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid white;
}
How do I draw the outline of a CSS triangle, considering border itself is used to make the triangle? External divs?
One way to do it is the create an inner triangle which is smaller.
.triangle-left {
width: 0;
height: 0;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
border-right: 23px solid red;
}
.inner-triangle {
position: relative;
top: -20px;
left: 2px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
<div class="triangle-left">
<div class="inner-triangle"></div>
</div>
This is how I would do it.
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid black;
position: relative;
}
.triangle-left:after {
content: '';
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-right: 21px solid #dddddd;
position: absolute;
top: -21px;
left: 1px;
}
<div class="triangle-left"></div>
Here it is on JSFiddle.
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>