hr or div line with up arrow in between. similar to this (Down arrow)
I had tried it. Looks like I am not able to move the arrow to correct position.
My Code:
div.hr {
width:100%;
height: 1px;
background: #7F7F7F;
position:relative;
margin-top:15px;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 5px;
left: 50%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 4px;
left: 50%;
}
<div class="hr"></div>
Here is a modified version of the example you provided, with the arrow pointing up, rather than down. Hope this helps.
DEMO: Codepen
CSS:
div.hr {
width:100%;
height: 1px;
background: #7F7F7F;
position:relative;
margin-top:15px;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -14px;
left: 50%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 50%;
}
HTML:
<div class="hr"></div>
Related
I created a border effect using selectors that shows only on corners as you can see in the following snippet.
html {
box-sizing: border-box !important;
}
*, *:before, *:after {
box-sizing: inherit;
}
.ix-border{
position: relative;
padding: 0;
margin: 0;
border-style: solid;
display: inline-block;
border-width: 1px;
background-color: transparent;
border-color: #A00;
}
.ix-border, .ix-border:hover, .ix-border:before, .ix-border:after{
transition: 0.42s;
}
.ix-border:before, .ix-border:after{
content:'';
position:absolute;
padding: 0;
margin: 0;
border-style: solid;
display: inline-block;
border-width: 1px;
background-color: transparent;
border-color: #FFF;
}
.ix-border:before{
top: 8px; right:-1px; bottom: 8px; left:-1px;
border-width: 0 1px 0 1px;
}
.ix-border:after{
top:-1px; right: 8px; bottom:-1px; left: 8px;
border-width: 1px 0 1px 0;
}
.ix-border:hover{
border-color: #F00;
}
.ix-border:hover:before{
top: 16px; bottom: 16px;
border-width: 0 1px 0 1px;
}
.ix-border:hover:after{
right: 16px; left: 16px;
border-width: 1px 0 1px 0;
}
.elmt{
width: 120px;
height: 60px;
text-align: center;
line-height: 60px;
}
<div class="elmt ix-border">
Hello World
</div>
However, I noticed that when a zoom is performed, the element border, that is supposed to be hidden by the ::before/::after selector borders, is sometimes randomly visible on one or two sides, depending on the zoom factor and the navigator.
I added the box-sizing:border box so that borders are included in zooming calculations, as suggested here but it's still not fixed.
So, am I missing something? Is there any hack to fix it or any other way (css only) to achieve to same effect?
This is really good question but I think it is really hard to do with pseudo elements and CSS only ,so I will suggest an alternative approach with real html elements like this so now you avoid the issue but have an extra html elements :(
.corners {
position: relative;
height: 150px;
padding: 10px;
position: relative;
text-align: center;
width: 150px;
padding: 10px;
line-height:150px;
font-size:16px;
}
.top, .bottom {
position: absolute;
width: 10px;
height: 10px;
}
.top {
top: 0;
border-top: 1px solid;
}
.bottom {
bottom: 0;
border-bottom: 1px solid;
}
.left {
left: 0;
border-left: 1px solid;
transition: all 0.42s;
}
.right {
right: 0;
border-right: 1px solid;
transition: all 0.42s;
}
.corners:hover .right{
width:20px;
height:20px;
border-color:red;
}
.corners:hover .left{
width:20px;
height:20px;
border-color:red;
}
<div class="corners">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom right"></div>
<div class="bottom left"></div>
content goes here
</div>
Ok here is my another take on the issue this time I am using only 3 html elements
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
text-align:center;
line-height: 100px;
}
div div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
left: -10px;
border-top: 1px solid #000;
border-left: 1px solid #000;
transition: all 0.42s;
}
div div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
right: -10px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transition: all 0.42s;
}
div div {
margin: 0;
position: absolute;
top: 0;
}
span:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
left: -10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
transition: all 0.42s;
}
span:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
right: -10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transition: all 0.42s;
}
div:hover span:after{
width:30px;
height:30px;
border-color:red;
}
div:hover span:before{
width:30px;
height:30px;
border-color:red;
}
div:hover div:before{
width:30px;
height:30px;
border-color:red;
}
div:hover div:after{
width:30px;
height:30px;
border-color:red;
}
<div>some content<div></div><span></span></div>
I have a strange issue with CSS pseudo after and before when I wanted to create a "ribbon" - they just won't follow z-index for some reason !?
.posts-list .post .title {
position: relative;
color: #fff;
padding: 5px 15px;
width: 100%;
margin-left: -15px;
background: #698800;
z-index: 1;
}
.posts-list .post .title:before {
content: "";
position: absolute;
border-color: transparent #7d90a3 transparent transparent;
border-style: solid;
border-width: 15px;
height: 0;
left: -15px;
bottom: -15px;
width: 0;
z-index: -1;
}
.posts-list .post .title:after {
content: "";
position: absolute;
border-color: transparent transparent transparent #7d90a3;
border-style: solid;
border-width: 15px;
height: 0;
right: -15px;
bottom: -15px;
width: 0;
z-index: -1;
}
Here is the fiddle: http://jsfiddle.net/182999yj/
How would I define the degree of an arrow created with css follows
<div class="bubble"></div>
.bubble
{
background: none repeat scroll 0 0 #FF7401;
border: 3px solid silver;
border-radius: 25px;
bottom: 18px;
float: right;
height: 63px;
margin-right: 10px;
padding: 0;
position: relative;
width: 250px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 29px 16px 0;
border-color: #ff7401 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -29px;
left: 47px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 31px 18px 0;
border-color: silver transparent;
display: block;
width: 0;
z-index: 0;
bottom: -34px;
left: 45px;
}
div.bubble p {
color: #FFFFFF;
font-size: 21px;
font-weight: bold;
margin-top: 10px;
text-align: center;
}
http://jsfiddle.net/lgtsfiddler/GpUpZ/1/
What I want is that the arrow's right edge right should be longer and not equal to the left edge. In particular, the left edge should be perpendicular to the text-bubble, and the right edge should come to meet it. For better visualization, here is an example of what I'm trying to achieve:
Modify your css as like this
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 33px 18px 0; // modify this line
border-color: silver transparent;
/* display: block; */ // remove this line
width: 0;
z-index: 0;
bottom: -27px; // modify this line
left: 50px;
-webkit-transform: rotate(-108deg) skew(11deg,-10deg); // modify this line
}
Demo
The shape and direction of the arrow is determined by the individual border widths and colors
A simple adjustment of individual values makes it easy to experiment. It's often also useful to write out the individual values for both widths and colors so see what's what.
JSfiddle Demo
CSS
.bubble {
background: none repeat scroll 0 0 #FF7401;
border: 3px solid silver;
border-radius: 25px;
bottom: 18px;
height: 63px;
margin: 50px;
padding: 0;
position: relative;
width: 250px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top:100%;
left: 47px;
}
.bubble.one:after { /* straight left side */
border-width: 29px 29px 29px 0;
border-color: #ff7401 transparent transparent transparent;
}
.bubble.two:after { /* straight right side */
border-width: 29px 0px 29px 29px;
border-color: #ff7401 transparent transparent transparent ;
}
Following is my jsfiddle in which I am trying to place an arrow image on the bottom border centerally aligned but I am unable to do that. Kindly let me know how to put an arrow image so its centrally aligned no matter what the width of the box is or height? Thanks
http://jsfiddle.net/wn7JN/463/
.bubble
{
position: relative;
width: 100px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.arrow:before
{
content: "";
position: absolute;
left: 50%;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background-image:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}
Try this. I add some changes check,
.bubble
{
position: relative;
width: 600px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.arrow:before
{
content: "";
position: absolute;
left: 50%;
bottom:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
margin:0 0 0 -26px;
}
replace the .arrow:before style & try it. it will align the arrow at center bottom.
.arrow:before
{
content: "";
position: absolute;
left: 50%;
top:100%;
margin-left:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}
I am trying to make a popover with an error, but I am having trouble making the arrow appear above the border of the div I am attaching it to. I would appreciate any help.
This is what I have so far...
This is the CSS code I am using, but cant get it to work:
1.DIV for the entire popover:
<div class="info-popover">
<div class="inner"></div>
<div class="arrow"></div>
</div>
2.CSS for each:
.info-popover {
height: 250px;
margin-top: -255px;
position: absolute;
width: 400px;
}
.info-popover .inner {
background-color: #FFFFFF;
border: 1px solid #003366;
border-radius: 10px 10px 10px 10px;
height: 240px;
margin-top: 0;
width: 100%;
}
.info-popover .arrow {
background: url("/images/dock/popover-arrow.png") no-repeat scroll center -5px transparent;
height: 15px;
position: relative;
width: 100%;
z-index: 999;
}
CSS solution:
http://jsfiddle.net/wn7JN/
.bubble
{
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before
{
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
Easiest way:
HTML:
<div class="meow">
</div>
CSS:
.meow {
height: 100px;
width: 300px;
margin: 30px;
background: linear-gradient(#333, #222);
-o-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.meow:after {
content: " ";
border-top: 11px solid #222;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: relative;
top: 111px;
right: -140px;
}
Live preview: CodePen.io
Just do some few edits.
Try this:
HTML
<div class="info-popover">
<div class="inner"></div>
<p class="arrow"></p>
</div>
CSS
.info-popover {
position: relative;
/* any other CSS */
}
.arrow {
background: url("/images/dock/popover-arrow.png") no-repeat 0 0;
height: 15px;
width: 20px; /* width of arrow image? */
display: block;
position: absolute;
bottom: -15px;
left: 0; margin: 0 auto; right: 0; /* to center the arrow */
}