I want to align the the arrow with line using CSS and Jquery.
I have a link of jfiddle. This is my code. I want to align the arrow with the line.This is arrow CSS:
.east {
border-top: 5px solid #dcddd8;
border-left: 5px solid #dcddd8;
height: 15px;
width: 15px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
display:inline-block;
}
JSFiddle link here
If you want to add arrow heads like the flowchart you sent me in the above comment you can add this to your css
.sep:after{
content:"";
position:absolute;
border:6px solid;
border-color:transparent transparent transparent #eee9dc;
left:-70px;
top:47px;
}
http://jsfiddle.net/Xero1212/u56qF/6/
I added this to your "east" class
position:absolute;
top:43px;
left:-80px;
http://jsfiddle.net/Xero1212/u56qF/2/
Related
I used border-radius but it doesn't make all the edges round. I want to make a down angle arrow.
.drop-arrow {
border: solid #FFDD00;
border-width: 0px 20px 20px 0;
display: inline-block;
padding: 40px;
transform: rotate(45deg);
}
<span class='drop-arrow'></span>
You can rely on pseudo element to curve all the edges:
.drop-arrow {
--b:20px; /* border-width */
border: solid #FFDD00;
border-width: 0px var(--b) var(--b) 0;
border-bottom-right-radius:var(--b);
display: inline-block;
padding: 40px;
transform: rotate(45deg);
margin:30px;
position:relative;
}
.drop-arrow::before,
.drop-arrow::after {
content:"";
position:absolute;
width:var(--b);
height:var(--b);
background:#FFDD00;
border-radius:50%;
}
.drop-arrow::before {
top:calc(-1*var(--b)/2);
right:0;
transform:translateX(100%);
}
.drop-arrow::after {
left:calc(-1*var(--b)/2);
bottom:0;
transform:translateY(100%);
}
<span class='drop-arrow'></span>
<span class='drop-arrow' style="--b:30px;"></span>
<span class='drop-arrow' style="--b:15px;"></span>
To add a rounded edge to the inside part, you can add a gradient coloration like below:
.drop-arrow {
--b:20px; /* border-width */
border: solid #FFDD00;
border-width: 0px var(--b) var(--b) 0;
border-bottom-right-radius:var(--b);
background:
radial-gradient(farthest-side at top left,transparent 98%,#FFDD00 100%)
bottom -0.5px right -0.5px/var(--b) var(--b) no-repeat;
display: inline-block;
padding: 40px;
transform: rotate(45deg);
margin:30px;
position:relative;
}
.drop-arrow::before,
.drop-arrow::after {
content:"";
position:absolute;
width:var(--b);
height:var(--b);
background:#FFDD00;
border-radius:50%;
}
.drop-arrow::before {
top:calc(-1*var(--b)/2);
right:0;
transform:translateX(100%);
}
.drop-arrow::after {
left:calc(-1*var(--b)/2);
bottom:0;
transform:translateY(100%);
}
<span class='drop-arrow'></span>
<span class='drop-arrow' style="--b:30px;"></span>
<span class='drop-arrow' style="--b:15px;"></span>
Your code looks like you are using a font-framework with the arrow integretated - maybe something like https://fontawesome.com/.
There is no arrow in your css described. Have a look at the font you are using to find the symbol.
To get another arrow, either the font needs to support another arrow or you'll have to use another font/build your own font.
I have a product configurator on my website. The user can write a word on a clothe and a text appears on the product image.
I want to style this text to look like an embroidery. So i put a text shadow, the text color changes in function of the product color, but now, i want to put a "filter" over the color.
Constraint: i just have access to the CSS.
here's a fiddle i did:
#text
{
font-size:90px;
text-align:center;
font-family:'petit_formal_script';
-webkit-font-smoothing:antialiased;
text-shadow: 2px 2px 2px black;
color:lightblue;
}
#text:after
{
content:'';
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-image:url('http://hdwbin.com/wp-content/uploads/2014/11/red-background.jpg');
-webkit-background-clip:text;
-moz-background-clip:text;
-webkit-text-fill-color:transparent;
}
http://jsfiddle.net/u2to713t/
Thanks in advance.
I Finally did it..
The result is not what i expected but it works.
Here's the final fiddle for the one who will try one day to do the same thing:
http://jsfiddle.net/u2to713t/13/
#text
{
font-size:90px;
text-align:center;
font-family:'petit_formal_script';
-webkit-font-smoothing:antialiased;
text-shadow: 1px 2px 3px #474747;
color:lightblue;
}
#text:before
{
content: attr(data-text);
position:absolute;
left:-1px;
top:7px;
right:0;
bottom:0;
opacity:1.0;
z-index: 1;
color:transparent;
text-shadow:0px 0px 0px;
background:url("http://image.noelshack.com/fichiers/2015/20/1431421588-brodrwhite.png");
-webkit-background-clip:text;
-moz-background-clip:text;
background-clip:text;
}
you can add background image to a transparent text with with transparent text shadow using rgba
#text{
font-size:90px;
text-align:center;
font-family:'petit_formal_script';
-webkit-font-smoothing:antialiased;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
color:transparent;
background-image:url('http://hdwbin.com/wp-content/uploads/2014/11/red-background.jpg');
-webkit-background-clip:text;
-moz-background-clip:text;
-webkit-text-fill-color:transparent;
}
is this what u mean?
#text {
background: url(http://image.noelshack.com/fichiers/2015/20/1431421588-brodrwhite.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:90px;
text-align:center;
font-family:'petit_formal_script';
}
Just a quick question:
How can I create this vertical shape in CSS?
This is going to be a left border of a div.
Many thanks!
UPDATE
The main issue is with the bottom part of the line.
Try this trick with borders:
div {
border-left:20px solid orange;
border-bottom:20px solid transparent;
width:0;
height:300px;
}
Fiddle
Working Solution: http://jsfiddle.net/avi_sagi/F25zD/
CSS Rules
div{
height:100px;
width:0px;
border-left:5px solid #aa0;
border-bottom:5px solid transparent;
}
With a <div> you could use this css:
div {
height: 50px;
width: 50px;
border-left: 10px solid gold;
border-bottom: 10px solid transparent;
}
Here's a fiddle
For a 45° angle on the bottom, the border-bottom must be the same as the border-left. To alter the angle, change the width of border-bottom.
you can try with after pseudo element but this is another way:
<div class="container">
<div class="top"></div>
<div class="line"></div>
</div>
.top {
height:20px;
background-color:#f0ae3f;
width:20px;
}
.line {
height:300px;
background-color:#f0ae3f;
width:20px;
-moz-transform: skewX(0deg) skewY(-40deg);
-webkit-transform: skewX(0deg) skewY(-40deg);
-o-transform: skewX(0deg) skewY(-40deg);
-ms-transform: skewX(0deg) skewY(-40deg);
transform: skewX(0deg) skewY(-40deg);
margin-top:-10px;
}
here you have the fiddle: http://jsfiddle.net/WgmmU/1/
you could have a look at doing this using the :after selector in css
HTML
<div id="vLine"></div>
CSS
#vLine{
/* test styling */
position:absolute;
top:20px;
left:100px;
/* end test styling */
height:100px;
width:10px;
background:orange;
}
#vLine:after{
content: " ";
top: 100%;
border: solid transparent;
position: absolute;
border-width: 5px; /* half the width of your line*/
border-top-color: orange; /* because you want to touch the top with color */
border-left-color: orange; /* because you want to touch the left with color */
}
fiddle: http://jsfiddle.net/nQKR4/2/
div {
background-color:orange;
width:20px;
height:300px;
}
Best practice is not to use borders at all, because diffrent browsers render them diffrently (IE). Sometimes it may even break your layouts.
If I use box-sizing: "border-box" for images the images will get smaller, like on hover: Example JsFiddle
Is it possible to do the same effect without the image getting cropped?
Solution #1 Outline property. Try to use outline instead of border with negative outline-offset value equal to outline width:
img:hover {
box-sizing:border-box;
outline: solid 10px #f80;
outline-offset: -10px;
}
http://jsfiddle.net/dfsq/BPRyZ/2/
Also since IE does not understand this property you can leave box-sizing to be used by IE8+.
Solution #2 Using div as wrapper + :after:
<div class="img-wrap">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" class="img1" />
</div>
CSS:
.img-wrap:after {
border: 0;
}
.img-wrap:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: solid 10px #f80;
}
http://jsfiddle.net/dfsq/BPRyZ/7/
The question you need to answer is, do you want the image itself to be 200px, or the entire box to be 200px. There are 4 different ways to code this depending on your answer to the previous question...
If you want the entire box to be 200px wide, then you can use border-box with the following code...
http://jsfiddle.net/BPRyZ/8/
img {
width:200px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
If you want the entire box to be 200px wide, then you could also use this code...
img {
width:180px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
If you want the image itself to be 200px, then you need this code... (this means your total box width is actually 220px)
img {
width:220px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
For the above you could also use...
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
I updated your jsfiddle
CSS:
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
width:220px;
}
Please find this css class to create simple uparrow downarrow left arrow and right arrow.
<html>
<style>
.left {border-bottom: 10px solid transparent;
border-right: 10px solid red;
border-top: 9px solid transparent;
float: left;}
.right {border-bottom: 10px solid transparent;
border-left: 10px solid red;
border-top: 9px solid transparent;
float: left;}
.top{ border-color: black transparent transparent;
border-style: solid;
border-width: 11px 7px 10px;
float: left;}
.bottom {border-color: transparent transparent black !important;
border-style: solid;
border-width: 0 27px 19px 25px;
float: right;}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</html>
Class left means Leftward arrow.,
Any one please suggest me the better way of creating arrows using simple css
The solution you have presented in your question is the best one if you care about IE7 compatibility.
Yes, there are other ways to achieve the same thing.
For example, if you drop IE7 support, then you could apply these same styles to :before/ :after pseudo-elements and avoid cluttering your HTML.
You also have the option of using gradients to create triangles - example. However, this is one solution that won't even work in IE9, which is the current IE version.
css tricks may be browser/version limited.
You can also get icon images here:
http://www.iconarchive.com/search?q=arrow+up
Small ones here:
http://p.yusukekamiyamane.com/icons/search/fugue/#keyword=arrow
A css arrow can be created using this style. you need to set the width and height of the arrow.
div.left {
z-index: 2000;
width: 80px;
height: 80px;
border-top: 2px solid #ddd;
border-left: 2px solid rgba(150,150,150,0.4);
text-indent: -90000px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
also if you need a easier way then you can always switch to use images