I'm having so much trouble getting this arrow designed how I want.
Right now I'm stuck with a solid triangle and I'm trying to turn it into a "hairline" arrow, like so: http://davidkelley.me/2013/03/01/css-hairline-arrows.html.
Fiddle
.hairline-down-arrow {
border: 1px solid black;
border-radius: 50%;
width: 65px;
height: 65px;
background-color: white;
}
.hairline-down-arrow:after {
content: "";
position: relative;
top: 44px;
left: 15px;
border-top: solid 25px black;
border-right: solid 15px transparent;
border-bottom: solid 25px transparent;
border-left: solid 15px transparent;
}
<section class="hairline-down">
<div class="hairline-down-arrow"></div>
</section>
Any help?
Thanks.
Why not just use an svg?
<svg width="70" height="55" viewBox="-2.5 -5 75 60" preserveAspectRatio="none">
<path d="M0,0 l35,50 l35,-50" fill="none" stroke="black" stroke-linecap="round" stroke-width="5" />
</svg>
Or you could use a :pseudo-element.
div {
position: relative;
width: 80px;
height: 1px;
background: black;
transform: rotate(55deg);
transform-origin: 0% 0%;
}
div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 100%;
background: black;
transform: rotate(-110deg);
transform-origin: 0% 100%;
}
<div></div>
you can use border for pseudo element and rotate,skew so that it
.hairline-down-arrow {
border: 1px solid black;
border-radius: 50%;
width: 65px;
height: 65px;
position: relative;
background-color: white;
}
.hairline-down-arrow:after {
content: "";
position: absolute;
top: 4%;
left: 54%;
width: 30px;
height: 30px;
border-width: 0px 1px 1px 0px;
transform: rotate(46deg) translate(-50%) skew(10deg, 10deg);
transform-origin: left;
border-style: solid;
border-color: black;
}
<div class="hairline-down-arrow"></div>
Hey i just make it for left direction you can do some little change to move in any direction.
.leftchat:after {
content: "";
position: absolute;
top: 6px;
left: -7px;
border-style: solid;
border-width: 5px 7px 5px 0;
border-color: transparent #fff;
display: block;
width: 0;
height:0
}
.leftchat:before{
content: "";
position: absolute;
top: 2px;
left: -12px;
border-style: solid;
border-width: 8px 11px 8px 0;
border-color: transparent #D1D2D4;
display: block;
width: 0;
height:0;
z-index: 0
}
I created a CSS only downarrow:
http://jsfiddle.net/x3802ox3/
<div class="link">This is text with a downarrow<div class="arrow"></div></div>
.link {
position: relative;
display: inline-block;
padding-right: 27px;
font-size: 18px;
}
.arrow {
position: absolute;
right: 0;
top: 11px;
display: block;
width: 20px;
}
.arrow:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 12px;
background: #000000;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
transform: rotate(40deg);
}
.arrow:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 12px;
background: #000000;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
transform: rotate(-40deg);
}
Live demo
Plain CSS
.arrow {
display: inline-block;
position: relative;
margin: 1em;
}
.arrow.thin.up {
border-top: 1px solid #fff;
border-left: 1px solid #fff;
height: 40px;
width: 40px;
transform: rotate(45deg);
}
.arrow.thin.left {
border-top: 1px solid #fff;
border-left: 1px solid #fff;
height: 40px;
width: 40px;
transform: rotate(135deg);
}
.arrow.thin.down {
border-top: 1px solid #fff;
border-left: 1px solid #fff;
height: 40px;
width: 40px;
transform: rotate(225deg);
}
.arrow.thin.right {
border-top: 1px solid #fff;
border-left: 1px solid #fff;
height: 40px;
width: 40px;
transform: rotate(315deg);
}
or as a SASS mixin
#mixin arrow($color, $direction: down, $size: 10px) {
border-top: 1px solid $color;
border-left: 1px solid $color;
height: $size;
width: $size;
#if $direction == 'up' {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
} #else if $direction == 'left' {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-0.7071067811865475, M12=0.7071067811865476,M21=-0.7071067811865475,M22=0.7071067811865476);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=-0.7071067811865475, M12=0.7071067811865476,M21=-0.7071067811865475,M22=0.7071067811865476)";
} #else if $direction == 'down' {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
transform: rotate(225deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-0.7071067811865477, M12=-0.7071067811865475,M21=-0.7071067811865477,M22=-0.7071067811865475);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=-0.7071067811865477, M12=-0.7071067811865475,M21=-0.7071067811865477,M22=-0.7071067811865475)";
} #else if $direction == 'right' {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7071067811865474, M12=-0.7071067811865477,M21=0.7071067811865474,M22=-0.7071067811865477);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865474, M12=-0.7071067811865477,M21=0.7071067811865474,M22=-0.7071067811865477)";
}
}
body {
background: #000;
text-align: center;
padding: 5em;
}
.arrow {
display: inline-block;
position: relative;
margin: 1em;
}
.arrow.thin.up {
#include arrow($direction: up, $color: #fff, $size: 40px);
}
.arrow.thin.left {
#include arrow($direction: left, $color: #fff, $size: 40px);
}
.arrow.thin.down {
#include arrow($direction: down, $color: #fff, $size: 40px);
}
.arrow.thin.right {
#include arrow($direction: right, $color: #fff, $size: 40px);
}
Related
I've managed to set an outline but it's not going around the arrow but around the whole box. Is there a fix for this?
.arrows {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
.arrow {
border: solid #49fb35;
border-width: 0 10px 10px 0;
display: inline-block;
padding: 25px;
outline: solid black;
outline-width: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<div class="arrows">
<i class="arrow down"></i>
</div>
The outline will make an outline to the whole box, if you want the outline to surround only the border, it would be tricky, this might be what you're looking for if you want CSS only solution.
.arrows {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
.arrow {
border: solid #49fb35;
border-width: 0 10px 10px 0;
display: inline-block;
padding: 25px;
box-shadow: 3px 3px 0px 2px black, inset -3px -3px 0px 2px black
}
.arrow:before {
content: '';
width: 3px;
position: absolute;
left: 0;
bottom: -15px;
z-index: 100;
background: #000;
height: 16px;
}
.arrow:after {
content: '';
width: 16px;
position: absolute;
right: -15px;
top: 0;
z-index: 100;
background: #000;
height: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<div class="arrows">
<i class="arrow down"></i>
</div>
I am not sure if this is quite what you are looking for but might be useful starting point.
.arrows {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
.arrow {
border: solid #49fb35;
border-width: 0 10px 10px 0;
display: inline-block;
padding: 25px;
box-shadow: 1px 1px 1px #000;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<div class="arrows">
<i class="arrow down"></i>
</div>
you can you ::before & ::after css to achieve this.
.arrows {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
.arrow {
border-width: 0 10px 10px 0;
display: inline-block;
padding: 25px;
position: relative;
}
.arrow::after {
content: '';
width: 10px;
height: 100%;
background-color: #49fb35;
position: absolute;
left:0;
}
.arrow::before {
content: '';
width: 100%;
height: 10px;
background-color: #49fb35;
position: absolute;
left: 0;
}
.arrow::after,
.arrow::before {
box-shadow: 0px 0px 1px 1px black;
}
.down {
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}
<div class="arrows">
<i class="arrow down"></i>
</div>
I'm having difficulty adding a box shadow around the outline of the arrow that was generated using border properties. Is there a way to make the box shadow in the shape the same as the arrow instead of a square box?
Here's a jsfiddle.
HTML:
<a class="bx-prev"></a>
<a class="bx-next"></a>
CSS:
.bx-prev, .bx-next {
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
top: 200px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
Try this.
Edit!
.bx-prev, .bx-next {
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
top: 200px;
-webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
<a class="bx-prev"></a>
<a class="bx-next"></a>
You can try the blur filter by creating the same arrow with a pseudo element:
.bx-prev,
.bx-next {
top: 200px;
position:relative;
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
/*the arrow*/
.bx-prev:before,
.bx-next:before,
.bx-prev:after,
.bx-next:after{
content:"";
position:absolute;
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
}
/*the shadow*/
.bx-prev:after,
.bx-next:after{
border-color: red;
z-index:-1;
filter:blur(5px);
}
<a class="bx-prev"></a>
<a class="bx-next"></a>
I've a div and I need a border with the left side oblique, but I'm finding only solutions that have the element filled with color.
I need only the border, like this picture:
How can I do this?
My actual code:
HTML
<div class="arrow">
<span id="time">30 mins</span>
<img src="assets/up_arrow.png" />
</div>
CSS
.arrow {
display: inline-block;
text-align: right;
text-decoration: none;
margin-left: 35%;
padding: 5px 0 5px 0;
border-style: solid;
border-width: 1px 0 1px 0;
border-color: #929A9D transparent #929A9D transparent;
}
.arrow > img {
vertical-align: middle;
width: 12px;
height: 12px;
}
TRY THIS DEMO
HTML & CSS
#a {
position: relative;
width: 120px;
padding: 10px 20px;
font-size: 20px;
position: relative;
margin-left:50px;
color: #2E8DEF;
border: 3px solid #2E8DEF;
border-left:0;
}
#a:before {
content: " ";
position: absolute;
display: block;
width: 50%;
height: 100%;
top: -3px;
left: -30px;
z-index: -1;
border:3px solid #2E8DEF;
border-right: 0px;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
<div id="a">
Hello
</div>
I have created the shape using border and before pseudo element. Hope this will help.
.ClassicBorder {
width: 200px;
padding: 4px 0;
border: 2px solid #999;
position: relative;
margin-left: 9px;
text-align: center;
font-size: 25px;
}
.ClassicBorder:before {
height: 36px;
width: 40px;
border: 2px solid #999;
content: '';
position: absolute;
border-right: 0px;
border-top: 0px;
transform: skew(340deg);
-webkit-transform: skew(340deg);
-moz-transform: skew(340deg);
background: #fff;
left: -9px;
top:0px;
}
<div class="ClassicBorder">
30 Mins >
</div>
I found a more elegant way, that's more easier to maintain, based on this answer: https://stackoverflow.com/a/24691352/5287860.
New code:
.row {
display: block;
overflow: hidden;
background: linear-gradient(to right, #fff, transparent, #fff, #fff);
}
.arrow {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 5px 0 5px 5px;
border-style: solid;
border-width: 1px 0px 1px 1px;
border-color: #929A9D transparent #929A9D #929A9D;
transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
width: 100px;
}
.arrow > div {
display: inline-block;
text-decoration: none;
transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
}
.arrow > img {
vertical-align: middle;
width: 12px;
height: 12px;
text-decoration: none;
transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
}
<div class="row">
<div class="arrow">
<div><span id="">30 mins</span></div>
<img src="assets/up_arrow.png" />
</div>
</div>
I am trying to put a point on the right side of a relative (no defined width) div.
HTML (using Wordpress and Bootstrap)
<div class="col-md-9 col-md-offset-1">
<h2 class="sml-title"><?php the_category(' - '); ?></h2>
...
CSS
.sml-title {
display: inline-block;
padding: 15px;
color: #fff;
background-color: #4ad2dc;
}
.sml-title:after {
right: 0px;
top: 0px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}
the problem I'm running into is that the arrow goes all the way to the right side of the screen. I want it to go right after the sml-title. But I can't set a width on the sml-title because i don't control the content.
Trying to accomplish this
You can achieve the shape as either of the two ways-
.arrow {
border-right: 33px solid transparent;
height: 0;
width: 130px;
border-bottom: 34px solid black;
}
.invert {
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: transform: rotateX(180deg);
;
}
#base {
background: red;
display: inline-block;
height: 134px;
margin-left: 33px;
/* margin-top: 51px; */
position: relative;
width: 70px;
transform: rotate(90deg);
}
#base:before {
border-bottom: 35px solid red;
border-left: 36px solid transparent;
border-right: 34px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -35px;
width: 0;
}
<div class="arrow"></div>
<div class="arrow invert"></div>
<div id="base"></div>
h2{
background: #000;
color: #fff;
float: left;
font-family: Arial, sans-serif;
overflow: hidden;
padding: 20px 50px 20px 20px;
position: relative;
text-align: center;
min-width: 200px;
}
h2:before, h2:after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #fff;
position: absolute;
right: -10px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
h2:before {
top: -20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
h2:after {
bottom: -20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<h2 class="sml-title">TITLE</h2>
If you use position: absolute, it will position the element within the nearest parent which is either position: relative or absolute. In your case, .sml-title has neither of those properties, so .sml-title:after is not positioned within .sml-title.
If you want your ::after pseudoelement to be positioned within .sml-title, you'll need to add position: relative or absolute to .sml-title
Hi there,
I'm unable to set transparent background for this octagon created using CSS.
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 42px;
height: 0;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
border-bottom: 29px solid red;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 42px;
height: 0;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
border-top: 29px solid red;
}
Is there any way I could make it work?
Thanks in advance,
Alex
Instead of using transparent, use your background color.
So for example if your background color is white use #fff.
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #fff;/* <--- */
border-right: 29px solid #fff;/* <--- */
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #fff;/* <--- */
border-right: 29px solid #fff; /* <--- */
width: 42px;
height: 0;
}
FIDDLE
Alternatively, you could use transforms to make an octagon
#octagon {
height: 100px;
overflow: hidden;
position: absolute;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 100px;
}
#octagon:after {
background: red;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
FIDDLE