How can I make a pointy arrow in CSS? Not just a triangle but one with a stem, like a traditional arrow that would be fired from a bow?
I'm trying to do it by creating a div container, containing two containers, left and right. The right will contain the triangle, and the left will contain three divs, the centre of which will be colored to create the stem.
Here's my code:
HTML:
<div id="main">
<div class='arrowblock'>
<div class='arrowright'></div>
<div class='rectcontainer'>
<div class='rect'></div>
<div class='rect' style='background-color:green'>
</div><div class='rect'>
</div>
</div>
CSS:
.rectcontainer {
height:30px;
width:100px;
}
.arrowblock {
width:130px;
border-top: 15px solid transparent;
}
.arrowright {
float:right;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 30px solid green;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
Is there a simpler way to achieve this?
Here is an arrow with pure CSS. Supported by all browsers. It took me less than a minute to make..
jsFiddle
.arrow {
width: 120px;
}
.line {
margin-top: 14px;
width: 90px;
background: blue;
height: 10px;
float: left;
}
.point {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
float: right;
}
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
How about just using a html entity or unicode symbol for your arrow:
<div>→</div>
<div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div>
div{
font-size: 40px;
}
FIDDLE
There are more to choose from here
To build on #josh-crozier's answer, you can eliminate a lot of the HTML by using pseudo-elements instead:
jsFiddle
HTML:
<div class="arrow"></div>
CSS:
.arrow {
position:relative;
width:120px;
margin:50px auto;
height:0;
border-bottom:10px solid blue;
}
.arrow::after {
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
position: absolute;
right: -10px;
top: -15px;
}
To add an arrow at the start of the line using the ::before element is trivial also: jsFiddle
I've created this, which you can use for an arrow that points to the right.
In the script are two variables, widthofarrow and colorofarrow. By changing these you can create an arrow of any size or color.
http://jsfiddle.net/FKekh/3/
HTML:
<!DOCTYPE html>
<div id="main"></div>
CSS:
.rectcontainer {
height:30px;
}
.arrowblock {
}
.arrowright {
float:right;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
JAVASCRIPT:
widthofarrow=130;
colorofarrow="#345678";
$("#main").append("<div class='arrowblock'><div class='arrowright'></div><div class='rectcontainer'><div class='rect'></div><div class='rect' style='background-color:" + colorofarrow + "'></div><div class='rect'></div></div></div>");
$('.arrowblock').css('width', widthofarrow + 'px');
$('.rectcontainer').css('width', (widthofarrow - (30)) + 'px');
$('.arrowright').css('border-top', (15) + 'px solid transparent');
$('.arrowright').css('border-bottom', (15) + 'px solid transparent');
$('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);
EDIT
I've updated JoshC's great code so it can be used to create arrows of different sizes and colors.
http://jsfiddle.net/fqcFp/2/
Taking Josh's answer a bit further I have made an example that adjusts width based on the container keeping it pure CSS. Thanks #Josh for the starting point! I support some older browsers so this is good for me. We could use transform to rotate the arrow as we like it in more modern browsers. HTH
<div class="RightArrow">
<div class="line"></div>
<div class="point"></div>
</div>
<!-- for very short arrows reduce the width of .line -->
<style> /* style tag added so SO will syntax color please use *.css irl*/
.RightArrow {
width:90%;
position: relative;
}
.line {
margin-top:8px;
width:97%;
background:blue;
height:0.3em;
float:left;
position: absolute;
}
.point {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 37px solid blue;
float:right;
}
</style>
Related
This question already has answers here:
Double border with different color [duplicate]
(8 answers)
Closed 8 months ago.
I want create this type gallery. I have multiple images in it. So when I hover on it then images should changes automatically.
Now I'm facing one issue i.e. How to add two borders like this using css or any other style-sheet.
You can add some box-shadow together. The first one is gray. The second one is white as a border with a one-pixel movement than the previous.
body{
background:#efefef;
}
.wrapper {
position: relative;
padding:10px;
}
.image {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
box-shadow: 5px -5px 0 gray,6px -6px 0 white,11px -11px 0 lightgray,12px -12px 0 white;
}
<div class="wrapper">
<div class="image"></div>
</div>
It can be done with three elements. One element is the image itself, and it has a tiny 1px white border. Then there are two elements behind the image that have grey background and also white border.
Look at this example, pretty much the same, just change the div with class image for an actual img element and invert the positioning and you are ready to go.
.wrapper {
position: relative;
}
div {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
}
.first {
left: 5px;
top: 5px;
z-index: -1;
background-color: #777;
}
.second {
left: 10px;
top: 10px;
z-index: -2;
background-color: #AAA;
}
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="image"></div>
</div>
try this
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:black;
}
.imageContainer{
display:inline-block;
position:relative;
width:100px;
height:100px;
top:200px;
left:200px;
padding:50px;
background: url("https://media.cntraveller.com/photos/611bf0b8f6bd8f17556db5e4/1:1/w_2000,h_2000,c_limit/gettyimages-1146431497.jpg") no-repeat center center/cover;
}
.divOne{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-6px;
left:6px;
z-index:-1;
}
.divTwo{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-10px;
left:10px;
z-index:-1;
}
</style>
</head>
<body>
<div class="imageContainer">
<div class="divOne"></div>
<div class="divTwo"></div>
</div>
</body>
</html>
i have to add dashed outline on focus at a specific offset of 4px, this is working fine in all browsers except IE since it doesn't support outline-offset and i cannot add a wrapper element in the HTML as work around with padding because i am trying to make a generic fix across the application, and i cannot add a border: 4px solid transparent, because the elements have a border which is required, and Pseudo elements will not work because we have a pseudo class of focus and we cannot use box-shadow as it doesn't allow a dashed outline
this is what i want to achieve in IE.
Css which is working fine on chrome
.keyBoardUser input[type="radio"]:focus + div {
//border: 4px solid transparent // cannot use this
outline-offset: 4px;
outline: 1px dashed black;
}
keyboard user is a class which is added on tabbing using JS.
Please refer to this thread, use CSS pseudo elements or nested div to set the border property, and use it as a alternative method.
Sample code as below:
<style>
.keyBoardUser {
margin-left:20px;
text-align: center;
width:30px;
}
input[type="radio"]{
width:20px;
height:20px;
}
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.keyBoardUser input[type="radio"]:focus + div {
outline-offset: 6px;
outline: 2px dashed black;
}
}
/*Microsft Edge browser*/
#supports (-ms-ime-align:auto) {
.keyBoardUser input[type="radio"]:focus + div {
outline-offset: 6px;
outline: 2px dashed black;
}
}
/*IE Browser*/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.box {
position: relative;
text-align: center;
}
.keyBoardUser input[type="radio"]:focus + div:after {
content: "";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 40px;
height: 40px;
border: 2px dashed red;
}
.box input[type="radio"] {
margin-left: 5px;
margin-top: 5px;
}
}
</style>
Html code as below:
<div class="keyBoardUser ">
<input id="Radio1" type="radio" />
<div class="box"><input id="Radio1" type="radio" checked="checked" /></div>
</div>
The output like this:
IE browser:
Chrome browser:
Use a pseudo element on the sibling element to style the dashed outline. I am calculating the width and height dynamically.
Use the below class. This works on IE as well!
.keyBoardUser input[type="radio"]:focus + div::after {
content: "";
position: absolute;
display: block;
border: 4px solid transparent;
outline: 1px dashed #000;
width: calc(100% + 10px);
height: calc(100% + 10px);
top: -5px;
left: -5px;
}
I have a class where I want to change a single attribute with a javascript function.
.msg_archivedropdown:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #FFFFFF;
}
I'm already using jQuery, so I've tried to do it with addClass:
function colorbubble(){
$("archivedropdown before").addClass("msg_archivedropdownhover before");
}
The added class looks like this, only the border color changes:
.msg_archivedropdownhover:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #DFDFDF;
}
Sadly, there's nothing changing. I've tried various kind of ways so far. I've tried to do it with:
$('.msg_archivedropdown before').css('border-right-color','#DFDFDF;');
Which got me nowhere and I also tried to loop through a getElementsbyClass which did not work either. I´m doing something wrong. Can someone please give me a hint? Thank you.
EDIT:
It's a speech-bubble where I made a triangle in the .msg_archivedropdown:before-class. On a mouseover event I want to change the color of the triangle as well. So I only want to change the color of the .msg_archivedropdown:before class.
You don't need jquery for a trivial case like this. You could just use :hover pseudo-class instead.
.msg_archivedropdown {
width: 100px;
height: 100px;
background-color: rebeccapurple;
position: relative;
}
.msg_archivedropdown::before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #FFFFFF;
}
.msg_archivedropdown:hover::before {
border-right:7px solid #DFDFDF;
}
<div class="msg_archivedropdown"></div>
You want to change the pseudo :before element in Jquery and you can't do it use $('.msg_archivedropdown:before')
so your alternative is to add class with pseudo element as msg_archivedropdown and in function toggleClass then the new class apply on DOM with the boreder-color
Do it as below:
function colorbubble(){
$('.msg_archivedropdown').toggleClass('beforeClass');
}
.msg_archivedropdown:before,.beforeClass:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:3px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #FFFFFF;
background: red
}
.beforeClass:before{
border-right-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg_archivedropdown">show div</div>
<button onclick="colorbubble()">change</button>
#divA {
width:100%;
border: 2px red solid;
}
#divB {
border: 2px blue solid;
width:68%;
float:left;
}
#divC {
border: 2px green solid;
width:28%;
height:80px;
float:right;
}
<div id="divA">
<div id="divB"></div>
<div id="divC"></div>
</div>
I may input some data from ajax and put into divC so the height of divC is dynamic and I want to set my height of divB is equal to divC when divC's height is change.
How to set my divB height equal to another divC which both inside a same divA?
1st Option: Flexbox
Flexbox can do that with a single property added to the parent
#divA {
width:100%;
border: 2px red solid;
display:flex;
}
Spacing can be achieved by adding justify-content:space-between to the parent also.
Support is IE10 & up
#divA {
width: 100%;
border: 2px red solid;
display: flex;
justify-content:space-between;
}
#divB {
border: 2px blue solid;
width: 68%;
float: left;
}
#divC {
border: 2px green solid;
width: 28%;
height: 80px;
float: right;
}
<div id="divA">
<div id="divB"></div>
<div id="divC"></div>
</div>
2nd Option: CSS Tables
#divA {
width: 100%;
border: 2px red solid;
display: table;
}
#divB {
border: 2px blue solid;
width: 68%;
display: table-cell;
}
#divC {
border: 2px green solid;
width: 28%;
height: 80px;
display: table-cell;
}
<div id="divA">
<div id="divB"></div>
<div id="divC"></div>
</div>
Caveat: As you can see you lose control of the spacing here although it's a small price to pay for increased browser Support which is IE8+
With jQuery you can do it as simple as this:
$('#divB').height( $('#divC').height() );
#divA {
width: 100%;
border: 2px red solid;
}
#divB {
border: 2px blue solid;
width: 68%;
float: left;
}
#divC {
border: 2px green solid;
width: 28%;
height: 80px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="divA">
<div id="divB"></div>
<div id="divC"></div>
</div>
Javascript Solution
In your ajax call back set divB height equal to divC after appending data to divC.
Something Like this:
$.ajax({
url:"your uel",
success:function(data) {
$('#divC').html( data );
//OR may be append
//$('#divC').append( data );
newHeight = $('#divC').height();
$('#divB').height( newHeight );
}
});
I have a div with text-align:center and 3 spans with text in them. I also have mouse over event that sets padding,background color and border. But when doing it it pushes the other 2 spans. Here is a jsfiddle for better visualization.
http://jsfiddle.net/93EBu/
<div id="div">
<span class="span">Word</span>
<span class="span">Word</span>
<span class="span">Word</span>
</div>
#div {
text-align:center;
}
.span {
margin: 0px 5%;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
padding:5px;
}
You can remove padding: 5px from .spanhover as well as adding border: 1px solid transparent to your span elements:
#div {
text-align:center;
}
.span {
margin: 0px 5%;
border: 1px solid transparent;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
}
Fiddle Demo
Also, instead of using unnecessary jQuery here, you can make use of :hover selector:
span:hover {
border:1px solid blue;
background-color:lightblue;
}
Fiddle Demo
TRY THIS:
#div {
text-align:center;
}
.span {
margin: 0px 5%;
padding:6px;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
padding:5px;
}
DEMO HERE: http://jsfiddle.net/93EBu/1/
The reason you are having this problem is because the padding you are adding to the spanhover class is pushing the elements. So you need to have the span already have the padding as well.... but since you have added a 1px border. You need to make the span padding be 6px... Padding + Border.