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.
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 want to make that line crossing the square (image below) in css, could anyone help me?
img http://www.brainmotion.com.br/download/img.png
If i have a div like this:
<div class="abcd">
</div>
.a {border:1px solid;}
Thanks so much
You can try using CSS triangle trick to render 2 triangles, the first has border-color the same as the color you want, the second has border-color the same as the background-color of the div:
div {
width:49px;
height:49px;
border:1px solid black;
position:relative;
}
div:before {
content:'';
position:absolute;
width:0;
height:0;
top:-1px;
left:-1px;
border:25px solid transparent;
border-right:25px solid black;
border-bottom:25px solid black;
z-index:-3;
}
div:after {
position:absolute;
content:'';
width:0;
height:0;
top:1px;
left:1px;
border:24px solid transparent;
border-right:24px solid white;
border-bottom:24px solid white;
z-index:-2;
}
Here is the fiddle
Note that with this solution, you have to tweak it a little with trial and error method.
UPDATE: Another simple method is using linear-gradient to generate the diagonal dynamically for the background of the div like this:
div {
width:50px;
height:50px;
border:1px solid black;
position:relative;
text-align:center;
line-height:50px;
font-size:25px;
background:linear-gradient(to bottom right, white, white 48%, black 50%, white 52%, white);
}
Here is the updated fiddle
Yes, you could do this using transform: rotate(45deg); in combination with overflow: hidden on the parent <div>, but I would highly discourage that, as It would be a disaster in terms of browser compatibility. I would just use the image.
Here is an example (note: quick and sloppy) that I tested in chrome that works:
http://jsfiddle.net/97xsh/1/
here is one that achieves the same effect.
http://jsfiddle.net/j8USa/1/
.box{
width:40px;
height:40px;
border:1px #000 solid;
overflow:hidden;
position:relative;
text-align:center;
vertical-align:middle;
}
.strike{
position:absolute;
width:60px;
height:1px;
border-top:1px #000 solid;
margin-top:20px;
margin-left:-10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.box span{
vertical-align:middle;
font-size: 26pt;
color:red;
}
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/
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;
}
I have tried to create a triangle with CSS and it looks good, however I have now got a problem implementing it after a box.
Check out my example and you will see what I mean:
https://jsfiddle.net/TTVuS/
It seems like the triangle after .box gets "cut off" and I have absolutely no idea why this happens.
I want it to look like .arrow.
I have tried to change dimensions of the box, the triangle etc. but nothing worked.
p.s. here is the css in case Jsfiddle is slow or not available again:
.box{
background:red;
height:40px;
width:100px;
}
/*the triangle but its being cut off*/
.box:after{
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
/*the triangle how it should look like*/
.arrow{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
Changing the triangle to position: absolute; and adding position: relative; to the .box fixes it. It seems to be inheriting the height of the box.
if you want to do [this][1] !
insert an div class arrow in the div class box may be the only solution.
[1]: https://jsfiddle.net/ouvqLa3k/
html{
padding:50px
}
.box{
position : relative;
background:red;
height:40px;
width:100px;
border : 0px;
}
/*
.box:after{
position : relative;
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
*/
.arrow{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
<div class="box">
<div class="arrow">
</div>
</div>
<br><br><br>
<div class="arrow">
</div>