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;
}
Related
i have this css code to add one arrow to my dropdown:
div {
&.toggle-assessment-key-dropdown {
margin-top: 10px;
border: 1px solid #cdd1da;
min-width: 180px;
border-radius: 4px;
min-height: auto;
padding: 6px 10px 5px 9px;
background: #ffffff;
position: absolute;
top: 24px;
left: 0;
z-index: 501;
&:after {
content: '';
position: absolute;
bottom: 100%;
left: 27%;
margin-left: 8px;
width: 0;
height: 0;
border-bottom: 6px solid #cdd1da;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-color: transparent transparent #fff transparent;
border-width: 6px;
background: #cdd1da;
}
}
}
This is the result:
I would like to remove grey corner but keep grey border:
Thank you
I have created snippet according to requirement, Currently done with css, you can make scss or i will create a pen let me know. please check:
div.toggle-assessment-key-dropdown {
margin-top: 10px;
border: 1px solid #cdd1da;
min-width: 180px;
border-radius: 4px;
min-height: auto;
padding: 6px 10px 5px 9px;
background: #ffffff;
position: absolute;
top: 24px;
left: 0;
z-index: 501;
}
div:before {
content: '';
position: absolute;
bottom: 100%;
left: 26%;
margin-left: 8px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #cdd1da transparent;
border-width: 7px;
}
div:after {
content: '';
position: absolute;
bottom: 100%;
left: 27%;
margin-left: 8px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 5px;
}
<div class="toggle-assessment-key-dropdown">
Item
</div>
I'm trying to place a css-shaped triangle inside a div.
Here is CSS:
/*Outer DIV*/
div.auth {
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
/*Triangle DIV*/
div.arrow {
width: 0.5em;
height: 65%;
background-color: #000;
position: relative;}
div.arrow::after {
display: block;
content: '';
position: absolute;
left: -60%;
transform: translateY(80%);
bottom: -1em;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
}
Desired result:
https://jsfiddle.net/k1x1car4/
How can I can do the same placement in a less tricky and more precise manner?
Thank you!
Just use an .arrow class and a pseudo-element on the parent div.
There is no need to create actual HTML for styling in this intance.
Then position element bottom:0 and left:0. Simple!
div.auth {
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
border: 1px solid black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
border-left: 3px solid #ccc;
font-family: "T3";
text-align: right;
}
div.arrow {
position: relative;
}
div.arrow::after {
display: block;
content: '';
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
}
<div class="auth arrow">par Makarios, Évêque de Lampsaque</div>
I don't know if you are able to change div.arrow, but if so I recommend you not to use a pseudo-element at all and just put the triangle directly into div.arrow. You can then position it using
position: absolute
left: 0;
bottom: 0;
Note: You're going to have to add position:relative to div.auth in order for position:absolute to work on div.arrow.
div.auth {
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
border: 1px solid black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
border-left: 3px solid #ccc;
font-family: "T3";
text-align: right;
position: relative;
}
div.arrow {
display: block;
content: '';
position: absolute;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
left: 0;
bottom: 0;
}
<div class="auth">
<div class="arrow"></div>par Makarios, Évêque de Lampsaque</div>
I'm trying to create an 'easy' button shape with css pseudeo :after/:before class.
I've read some blogs and articles about that, but no shape looked like mine. So I tried it on my own. But this I something, I can't figure out.
button{
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
}
button:after{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-right: solid 2px #000;
}
button:before{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-left: solid 2px #000;
}
<button>Let's do it</button>
Can someone give me a hint?
You can create this with :before and :after pseudo elements one for border and other one above for orange background.
button {
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
position: relative;
}
button:after,
button:before {
border-style: solid;
border-width: 50px 110px 0 140px;
border-color: #FFA500 transparent transparent transparent;
content: '';
position: absolute;
left: -2px;
top: 100%;
}
button:after {
transform: translateY(-1px);
}
button:before {
border-color: black transparent transparent transparent;
}
<button>Let's do it</button>
Not exactly the same size but you can play with the following one:
#pentagon {
margin-top: 45px;
position: relative;
width: 250px;
border-width: 70px 0 0;
border-style: solid;
border-color: orange transparent;
}
#pentagon:after {
content: "";
position: absolute;
height: 0;
width: 0;
top: -30px;
left: 0px;
border-width: 50px 125px 0 125px;
border-style: solid;
border-color: orange white;
}
<div id="pentagon"></div>
You could play with this, it has a border like your image http://www.cssarrowplease.com/
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 ;
}
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 */
}