I have a graph details, but i would like to show using css shapes. for that i am trying to create a css3 shapes to match my graphics ( see attached ) but i am not able to get the result.
How to reproduce this graphics?
my try: this is very bad:
<div class="container">
<div id="triangle-red"></div>
<div id="triangle-blue"></div>
<div id="triangle-yellow"></div>
</div>
#triangle-red {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#triangle-blue {
height: 0;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid blue;
}
#triangle-yellow
{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid yellow;
border-bottom: 50px solid transparent;
}
demo online
Note: according to the values of each comb, i would like the calculate the height and width, by the data what i am getting. (it's like graph)
First of all you will need 6 divs.
every div is triangle : to make one with css check this
use transform:rotate(xdeg)
for the shadows just change the color.
also use z-index to make the red divs above the blues
Related
How can I draw a thin horizontal line without using the <hr> tag ?
I tried this:
.horizontal-line{
border-top: 1px solid #9E9E9E;
border-bottom: 1px solid #9E9E9E;
}
Although it works, I want this line to be thinner. I tried to reduce 1px to 0.5px, but it didn't work.
Per this css-tricks discussion, you could give this a go:
.class-name:after {
content: " ";
display: block;
border-bottom: 0.5px solid #9E9E9E;
}
<div class="class-name"></div>
You can use it but there is not much difference.
.line {
display: inline-block;
width: 100%;
border-top: 0.2px solid red;
}
hr {
border-top: 0.2px solid red;
}
<div>
content
</div>
<span class='line'></span>
<div>
content
</div>
<hr>
<div>
content
</div>
There are many ways of doing this. we cant make the size of the borders less than 1px in CSS so I have tried this way. Feel free to change the opacity.
.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;
}
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 4 years ago.
Here is a simple triangle(non-isosceles):
#triangle-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div id="triangle-up"></div>
How can I calculate its height in javascript?
Simply use DOM offsetHeight to get the real height (including paddings and borders, but excluding outlines) of an object:
var height=document.getElementById("triangle-up").offsetHeight;
console.log(height)
#triangle-up {
width: 0;
height: 0px;
border-left: 30px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div id="triangle-up"></div>
The height is the 100px red border.
The full width is 80px:
The left side from the top tip to the left tip horizontally is 30px.
The right side from the top tip to the right tip horizontally is 50px.
How to get this in Javascript:
const triangle = document.querySelector('#triangle-up');
const trianlgeStyles = window.getComputedStyle(triangle);
const triangleHeight = triangleStyles['border-bottom-width'];
The height of the triangle will be bottom-border - top-border. In the snippet as you can see when the top border is shown it is directly above the bottom border and from the bottom the bottom-border extends 100px till the top, hence giving it the height of 100px.
#triangle-up {
width: 0;
height: 0px;
border-left: 30px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
border-top: 1px solid black;
}
<div id="triangle-up"></div>
How can I make a pointy arrow in CSS? Not just a triangle but one with a stem, like a traditional arrow that would be fired from a bow?
I'm trying to do it by creating a div container, containing two containers, left and right. The right will contain the triangle, and the left will contain three divs, the centre of which will be colored to create the stem.
Here's my code:
HTML:
<div id="main">
<div class='arrowblock'>
<div class='arrowright'></div>
<div class='rectcontainer'>
<div class='rect'></div>
<div class='rect' style='background-color:green'>
</div><div class='rect'>
</div>
</div>
CSS:
.rectcontainer {
height:30px;
width:100px;
}
.arrowblock {
width:130px;
border-top: 15px solid transparent;
}
.arrowright {
float:right;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 30px solid green;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
Is there a simpler way to achieve this?
Here is an arrow with pure CSS. Supported by all browsers. It took me less than a minute to make..
jsFiddle
.arrow {
width: 120px;
}
.line {
margin-top: 14px;
width: 90px;
background: blue;
height: 10px;
float: left;
}
.point {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
float: right;
}
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
How about just using a html entity or unicode symbol for your arrow:
<div>→</div>
<div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div>
div{
font-size: 40px;
}
FIDDLE
There are more to choose from here
To build on #josh-crozier's answer, you can eliminate a lot of the HTML by using pseudo-elements instead:
jsFiddle
HTML:
<div class="arrow"></div>
CSS:
.arrow {
position:relative;
width:120px;
margin:50px auto;
height:0;
border-bottom:10px solid blue;
}
.arrow::after {
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
position: absolute;
right: -10px;
top: -15px;
}
To add an arrow at the start of the line using the ::before element is trivial also: jsFiddle
I've created this, which you can use for an arrow that points to the right.
In the script are two variables, widthofarrow and colorofarrow. By changing these you can create an arrow of any size or color.
http://jsfiddle.net/FKekh/3/
HTML:
<!DOCTYPE html>
<div id="main"></div>
CSS:
.rectcontainer {
height:30px;
}
.arrowblock {
}
.arrowright {
float:right;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
JAVASCRIPT:
widthofarrow=130;
colorofarrow="#345678";
$("#main").append("<div class='arrowblock'><div class='arrowright'></div><div class='rectcontainer'><div class='rect'></div><div class='rect' style='background-color:" + colorofarrow + "'></div><div class='rect'></div></div></div>");
$('.arrowblock').css('width', widthofarrow + 'px');
$('.rectcontainer').css('width', (widthofarrow - (30)) + 'px');
$('.arrowright').css('border-top', (15) + 'px solid transparent');
$('.arrowright').css('border-bottom', (15) + 'px solid transparent');
$('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);
EDIT
I've updated JoshC's great code so it can be used to create arrows of different sizes and colors.
http://jsfiddle.net/fqcFp/2/
Taking Josh's answer a bit further I have made an example that adjusts width based on the container keeping it pure CSS. Thanks #Josh for the starting point! I support some older browsers so this is good for me. We could use transform to rotate the arrow as we like it in more modern browsers. HTH
<div class="RightArrow">
<div class="line"></div>
<div class="point"></div>
</div>
<!-- for very short arrows reduce the width of .line -->
<style> /* style tag added so SO will syntax color please use *.css irl*/
.RightArrow {
width:90%;
position: relative;
}
.line {
margin-top:8px;
width:97%;
background:blue;
height:0.3em;
float:left;
position: absolute;
}
.point {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 37px solid blue;
float:right;
}
</style>
I recently tried out the div with different shape like triangle trapezoid etc.
HTML:
<div class="triangle">HI nice to meet you guys</div>
CSS
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
Previously, the content appears properly when the div is a square (height and width are 100px).
When I style the div to look like a triangle, then the content oveflows.
How can I make this one as proportional in order to appear properly inside the div.
See fiddle: http://jsfiddle.net/7qbGX/2/
Any suggestion would be great.
try this: LINK
.triangle{
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
float: left;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.triangle p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
Your Height and width is 0. You won't fit any text into it. It will either overflow or you can set overflow to "hidden", but than you will not see anything cos the div have the size 0.
your div is invisible to see in your actual div try to give background-color to that div.
[see demo]http://jsfiddle.net/salwenikhil0724/7qbGX/6/
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
background-color:red;
}
.triangle p {
text-align: center;
top: 40px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
This is for displayed text properly, you need to mentioned width property as follows:-
<div style="width: 10em; word-wrap: break-word;">
Some longer than expected text with antidisestablishmentarianism
</div>
for Horizontal scroll you can put overflow-x:hidden its up to you dear.
I have this setup at the moment. I would like it so that when you hover over a box the bottom border changes to the same colour as inside the hovered div. I am starting to think this cannot be done with just css, but how would you add javascript to do this?
Any guidance would be appreciated
http://jsfiddle.net/hCK3D/7/
Why don't you just remove the bottom-border on hover and instead make the element 1px bigger in height? (You do not need to add any JavaScript codes)
Like this:
http://jsfiddle.net/hCK3D/17/
UPDATE: Now also the border is not disrupted..
UPDATED CSS:
.item-container {
float:left;
margin-top:20px;
border-bottom: 1px #BCC0C3 solid;
height:100px;
}
.item {
float:left;
background: #ccc;
width: 100px;
height: 100px;
border-left: 1px #fff solid;
border-top: 1px #BCC0C3 solid;
border-bottom: 1px #BCC0C3 solid;
box-sizing: border-box;
}
.item:first-child {
border-left: 1px #BCC0C3 solid;
}
.item:last-child {
border-right: 1px #BCC0C3 solid;
}
.item:hover {
background:#ECEFF4;
border-left:1px #BDC0C5 solid;
border-right:1px #BDC0C5 solid;
border-bottom: 0;
height:101px;
}
.item:hover + .item {
border-left-width: 0;
}
Overlap div container border with item border on hover
Unlike the other answers posted, this solution will allow you to keep the border line on the bottom: http://jsfiddle.net/hCK3D/15/ and your white vertical lines will continue to appear correctly.
The idea is that the border from the bottom is now set in the item, and when the item is hovered the bottom border changes colour to match the hover colour. Also the container border is set for the purpose of the white vertical lines, but on hover the item hover border bottom appears in front of the container border.
See the JSFiddle for source
do you mean like this?
jsfiddle
.body{background:#ECEFF4;}
.item-container {
float:left;
border-top: 1px solid #BCC0C3;
margin-top:20px;
}
.item {
float:left;
background: #ccc;
width: 100px;
height: 100px;
border-left: 1px solid #fff ;
border-bottom: 1px solid #BCC0C3;
}
.item:first-child {border-left: 1px solid #BCC0C3;}
.item:last-child {border-right: 1px solid #BCC0C3;}
.item:hover {
background:#ECEFF4;
border-left:1px solid #BDC0C5;
border-right:1px solid #BDC0C5;
border-bottom: 1px solid #ECEFF4;
}
.item:hover + .item {border-left-width: 0;}