I'm trying to create in a single box, two arrows, one as a pointer and the other one into the box just behind.
Can not find the way to get the arrow right behind.
Someone can help me??
here i post the link with the sample: http://jsfiddle.net/7Esu2/
CSS:
.arrow {
width:210px;
height:40px;
background-color:#CBCBCB;
border: 1px solid #CBCBCB;
position:relative;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:40px;
}
.arrow:after {
content:'';
position:absolute;
top:-1px;
left:210px;
width:0;
height:0;
border:21px solid transparent;
border-left:15px solid #CBCBCB;
}
.arrow:before {
content:'';
position:absolute;
top:-1px;
left:211px;
width:0;
height:0;
border:21px solid transparent;
border-left:15px solid #CBCBCB;
}
HTML:
<div class="arrow">
FLECHA
</div>
I prefer using inline-blocks over absolute positioning. Also, :before and :after create child elements (inside) the element you specify them on (at the beginning and end). For this, it would probably be best to have a wrapper (or inner) block, like so:
<div class="arrow">
<div class="inner-arrow">
FLECHA
</div>
</div>
Then the inner block is going to get most of the styling, as the wrapper is primarily there to contain the :before and :after. The wrapper (.arrow) needs to have font-size: 0 (or some other method to make the white-space around the inner block, .inner-arrow, go away).
.arrow {
font-size: 0;
}
.inner-arrow {
width:210px;
height:40px;
display: inline-block;
background-color:#CBCBCB;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:40px;
vertical-align: middle;
}
Most of the styles for .arrow:before and .arrow:after will be the same, so we'll group those. Then specify the differences below (they have to be below to override the common styles).
.arrow:before,
.arrow:after {
content:'';
display: inline-block;
width:0;
height:0;
border:20px solid transparent;
vertical-align: middle;
}
.arrow:before {
border-top-color: #CBCBCB;
border-bottom-color: #CBCBCB;
border-right-color: #CBCBCB;
}
.arrow:after {
border-left-color: #CBCBCB;
}
This is all in the a fiddle.
Related
I am in the process of designing a 3 stage progress bar in pure CSS. My current effort is shown below.
#progBar
{
background-color:#bdbdbd;
padding:1.5vw;
position:relative;
height:9vw;
}
.progcapt
{
background-color: #526cfd;
color: transparent;
text-shadow: 0px 2px 3px #526cfd;
-webkit-background-clip:text;
font-family:'arial black';
font-size:3vw
}
#cOne
{
position:absolute;
left:calc(50% - 2.5vw);
top:calc(50% - 2.5vw);
border-radius:5vw;
height:5vw;
width:5vw;
border:1px solid #526cfd;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0px 0px 3vw #526cfd;
background-color:white;
}
#cOne::before
{
position:absolute;
width:50vw;
height:1vw;
background-color:rgba(82,108,253,0.5);
content:'';
/*z-index:-1; does not give the expected result*/
}
#cOneRing
{
position:absolute;
top:-calc(0.5vw + 1px);
left:-calc(0.5vw + 1px);
width:6vw;
height:6vw;
border:1px solid #526cfd;
border-radius:6vw;
}
<div id='progBar'>
<div id='cOne'>
<span class='progcapt'>1</span>
<div id='cOneRing'> </div>
</div>
</div>
The intent here is this
There will be three disc, one for each step
I am using the central disc as my "anchor"
Each disc is shown with an annular border which I create by absolutely positioning the disc and making the annulus its child.
The ::before pseudo-element for this anchor is used to create the track for the progress bar
The ensemble - the three circles and the track - are placed in an relatively positioned rectangular bar which acts as the background
The issue I have run into - I thought I would be able to send the track bar behind its parent disc element by setting its z-index attribute to -1. However, that simply causes it to disappear altogether. Clearly, I am doing something wrong here but I am unable to spot what that might be. Hopefully, someone here will be able to spot the error.
As far as I understood you need this
#progBar {z-index: -2;}
#cOne::after { z-index: -1;}
#progBar
{
z-index: -2;
background-color:#bdbdbd;
padding:1.5vw;
position:relative;
height:9vw;
}
.progcapt
{
background-color: #526cfd;
color: transparent;
text-shadow: 0px 2px 3px #526cfd;
-webkit-background-clip:text;
font-family:'arial black';
font-size:3vw
}
#cOne
{
position:absolute;
left:calc(50% - 2.5vw);
top:calc(50% - 2.5vw);
border-radius:5vw;
height:5vw;
width:5vw;
border:1px solid #526cfd;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0px 0px 3vw #526cfd;
background-color:white;
}
#cOne::before
{
position:absolute;
width:50vw;
height:1vw;
background-color:rgba(82,108,253,0.5);
content:'';
z-index:-1;
}
#cOneRing
{
position:absolute;
top:-calc(0.5vw + 1px);
left:-calc(0.5vw + 1px);
width:6vw;
height:6vw;
border:1px solid #526cfd;
border-radius:6vw;
}
<div id='progBar'>
<div id='cOne'>
<span class='progcapt'>1</span>
<div id='cOneRing'> </div>
</div>
</div>
I simply want .work-description to have a bottom border also when .project-link is hovered.
.work-description { padding-top:50px; width:50%; margin:0 auto;}
.project-link { font-size:3em; text-decoration:none; }
.project-link:hover { border-bottom: 3px solid #000; }
.project-link:hover + .work-description {
border-bottom: 3px solid #000;}
I am not sure if you are aware that the + is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, the element having work-description class has to immediately after the project-link class.
If you have the right html (as shown below in the example), your code just works fine.
.work-description {
padding-top:50px;
width:50%;
margin:0 auto;
}
.project-link {
font-size:3em;
text-decoration:none;
}
.project-link:hover {
border-bottom: 3px solid #000;
}
.project-link:hover + .work-description {
border-bottom: 3px solid #000;
}
<input type="button" value="abcd" class="project-link">
<div class="work-description">some random text here</div>
Hope this helps!!!
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'm making an error message, using a pointer image that should give the left side a border. You can see an example here.
My current css is:
span.arrow {
background-color:white;
background: url('http://i45.tinypic.com/201d0n.png') no-repeat left center;
height:17px;
display:inline-block;
}
span.error {
display:inline-block;
padding-right:2px;
background-color:white;
margin-left:10px;
height:15px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
box-shadow:5px 5px 10px #888888;
position:relative;
top:-2px;
}
And html to display the error:
<span class='arrow'>
<span class='error'>
Errormessage.
</span>
</span>
Now first of all, the code seems a bit messy. Like having to position the span up two pixels is a bit strange. Nevertheless it seems to work in Chrome, FF & Opera, but not in IE9.
If it isn't clear: the box should perfectly aline with the triangle-image.
span.arrow {
background: url('http://i45.tinypic.com/201d0n.png') no-repeat left center transparent;
line-height:17px;
padding-left:10px;
display:inline-block;
}
span.error {
padding-right:2px;
background-color:white;
line-height:15px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
display:block;
}
span.error {
display:inline-block;
padding-right:2px;
background-color:white;
margin-left:10px;
line-height: 17px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
box-shadow:5px 5px 10px #888888;
position:relative;
top:-2px;
}
Generally if you make your line-height match your content area height, the text will be vertically aligned.
http://jsfiddle.net/dshFk/3/
I looked in IE and it looked fine.
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>