This question already has answers here:
How do CSS triangles work?
(23 answers)
Creating a transparent arrow above image in CSS3
(2 answers)
Closed 9 years ago.
Respected stackoverflowers,
How do i create a triangle element with the background pattern?
For example i need the div like this :
But my state is like this :
All examples with triangle elements use borders which cant have an img in that ....
This is my subsection class which needs the coolarrow:
<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div>
.subsection {
.box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3));
background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern
display: block;
clear: both;
float: left;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
display: none;
}
.subsection {
position:relative;
}
.subsection:before {
content:'';
position:absolute;
top:0;
left:0;
height:20px;
width:0;
border-left:20px solid white;
border-bottom:16px solid transparent;
}
.subsection:after {
content:'';
position:absolute;
top:36px;
left:0;
bottom:0;
width:0;
border-left:20px solid white;
border-top:16px solid transparent;
}
And im getting :
Which is fine ...how can i bring the arrow on the top in the required form ? ... and overlaying the cases div ? ...
Thanks.
If you don't care for cross browser compatibility, you can use a pseudo-element that you rotate by 45 degrees and attach the styles to it. The only thing you need additionally would be the background, rotated (back) by 45deg to attach to the pseudo element:
div.coolarrow:before {
content: '';
position: absolute;
z-index: -1;
top: -24.7px;
left: 10px;
background-color: #bada55;
width: 50px;
height: 50px;
background: url(url/to/your/45deg/rotated/background.gif);
box-shadow: inset 0 0 10px #000000;
transform: rotate(45deg);
}
Here's a short fiddle to illustrate (without background):
Fiddle
To work this out for other cases but 90degree arrows, you need to skew the rect additionaly. And I don't really know what then happens with the background image...
Put the image as a background for a div, and just put negative values for the margin to make it overlay on the bar. Example (although estimated, in no way do I claim this to work) would be margin-left: -20px; margin-top: -20px; and have it after the line.
Alternatively go with #Py's answer, and you can use this CSS for the arrow, and do the same negative margins to make it line up.
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; }
go on http://apps.eky.hk/css-triangle-generator/ and generate it :D
OR
#triangle {
width: 0;
height: 0;
border-bottom: 120px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
In the image below there is a arrow head that sticks out of the middle of the bottom edge. How would I be able to create that? I have it marked with the red rectangle.
(source: funkyimg.com)
Green and White appear to be 2 different <section> tags. I can't seem to figure out what to google for, and this is the picture of a website and the actual website doesn't have this already, so can't open it and look up the code.
Use pseudo element after for that the trick is to position:absolute; and borders correctly.
Using top:100%; and border-top for :after adds the down arrow at the bottom of the div.
Using bottom:100%; and border-bottom for :after adds the upward arrow at the top of the div.
.con:after {
content:'';
position: absolute;
top:100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
.con{
width:100%;
height:100px;
background-color:green;
position:relative;
}
<div class="con"></div>
This should help you, it's CSS.
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow
_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}
You have to set the class in your tag, something like this:
<div class="arrow_box">
<h1 > Something </h1>
</div>
Check fiddle to see how it works: https://jsfiddle.net/kzvrvbzL/1/
Make your element position:relative it's necessary because for arrow you are going to use position:absolute. So relative position will bound its child absolute inside itself. Then make arrow you can use css-triangle-generator. instead of making separate element for arrow you can use before, after pseudo elements.
.section{
height:250px;
position:relative;
background:blue;
margin-bottom:50px;
}
.section:before{
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -30px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 30px 50px 0 50px;
border-color: blue transparent transparent transparent;
}
<div class="section"> </div>
I'm trying to recreate these arrows in CSS for a website I'm redesigning to be responsive. These two guys were done with static images but I'd like them to be pure CSS.
This is a sprite that was used for mouseover replacement. The bottom is the mouseover state. The background behind the arrow needs to be transparent.
I thought it would be a simple div with a p or heading tag inside:
<div class="arrow_box">
<p>UTILITIES</p>
</div>
I've searched for examples everywhere and everything I've tried to modify never lets me seem to have full control of the width and height of the element. The width (with the arrow) is 114px. The height (of a single state) would be 29px.
I've played with this for the better part of an hour trying to get it properly sized but nothing seems to work. http://codepen.io/anon/pen/bpBGQL My lack of knowledge on how this works is partially to blame.
So the trick, here, is being able to control the height correctly. Here, I've got the text in a span with a line-height : 0, and padding:15px. Now, we have precisely 30px of height, and can use an ::after pseudo element to fabricate the arrow. The width will be set by the text content, but can be defined with an explicit width rule, as well.
<div class="arrow"><span>text</span></div>
.arrow{
display:inline-block;
height:auto;
background-color:orange;
}
.arrow span{
display:inline-block;
line-height:0;
padding:15px;
color:white;
}
.arrow::after{
width: 0;
height: 0;
position: absolute;
right:0
top: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid orange;
content: "";
}
Add whatever colors / hover states you require. You can see some basic rules in the working fiddle.
Fiddle
You can do this with :after pseudo element. You can change color of pseudo element on hover state like this .arrow_box:hover:after
* {
box-sizing: border-box;
}
p {
margin: 0;
padding-left: 10px;
}
.arrow_box {
background: #627680;
display: block;
color: white;
position: relative;
height: 30px;
line-height: 30px;
width: 114px;
transition: all 0.3s ease-in;
}
.arrow_box:after {
content: '';
height: 0;
width: 0;
position: absolute;
top: 0;
right:0;
transform: translateX(100%);
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
border-left: 20px solid #627680;
border-right: 15px solid transparent;
transition: all 0.3s ease-in;
}
.arrow_box:hover {
background: #2A92C2;
}
.arrow_box:hover:after {
border-left: 20px solid #2A92C2;
}
<div class="arrow_box">
<p>UTILITIES</p>
</div>
did you consider gradient backgrounds ?
body {
background: linear-gradient(45deg, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray);
/* demo purpose only */
}
.arrow {
text-transform: uppercase;
/* optionnal */
padding: 3px 1.5em 3px 0.5em;
color: white;
background: linear-gradient(225deg, transparent 0.6em, #627680 0.6em) top no-repeat, linear-gradient(-45deg, transparent 0.6em, #627680 0.6em) bottom no-repeat;
background-size: 100% 50%;
/* each gradient draws half of the arrow */
}
.arrow:hover {
/* update gradient color */
background: linear-gradient(225deg, transparent 0.6em, #2A92C2 0.6em) top no-repeat, linear-gradient(-45deg, transparent 0.6em, #2A92C2 0.6em) bottom no-repeat;
background-size: 100% 50%;
}
<span class="arrow"> Utilities</span> <span class="arrow"> testing</span>
You may also want to take a look at Responsive Arrow Breadcrumb Navigation for breadcrumbs and imbricated arrows or Create dynamic arrow-like shape with CSS
Does this pen provide what you need?
http://codepen.io/anon/pen/dMOPmV (may require some pixel pushing to get it perfect)
It just required adjusting:
border-width: 27px;
margin-top: -35px;
and adding a hover state for the main element and before element.
I'm trying to make an hr with two colors on it, one dark red on the bottom and one orange on the top. An image is attached that gives an example of what I'm trying for. Is there any way to do this using pure CSS?
EDIT: If not, is there a way to set an hr to be an image? Like a png? Something that will stretch for different sizes?
Use CSS with 2 borders like so:
hr {
border-top: 1px solid gray;
border-bottom: 1px solid white;
}
Example in JSFiddle.
And to mimic what you have in your picture with text floating on top of the HR, you can do something like this JSFiddle.
Another solution could be to just simply use a CSS gradient. Like so:
hr {
border: 0;
height: 1px;
background: #1e5799;
background: linear-gradient(to right, #1e5799 50%,#7db9e8 50%);
}
so if i understand correctly.. u want one hr..with lets say 1px height of blue and another 1px height of red sitting on top of each other..
u can do this with pure css, by using pseudo classes.
hr{
position:relative;
height:1px;
background-color:red;
}
hr:before {
position:absolute;
content : ' ';
left:0;
right:0;
height:1px;
top:-1px;
background-color:blue;
}
You don't need to use hr just a single element (Div) with Pseudo-elements like this:
:root {
background-color: red;
text-align: center
}
:root:hover {
background-color: orange;
}
div {
position: relative;
width: 40px;
display: inline-block;
font-style: italic
}
div:before, div:after{
content: '';
position: absolute;
width: 100px;
height: 1px;
background: black;
top: 50%;
border-radius: 4px;
box-shadow: 0 1px 1px white;
}
div:before{
left: -100px;
}
div:after{
right: -100px;
}
<div>or</div>
I got with image as a background, and want to get effect of multiple inner outlines.
Outlines should be solid white 2px, but in different position - say -4px, -8px, -12px.
Goal is to get more than 2 outlines.
I know i can make box-shadow and outline to get double outilne, but noticed that i cannot attach to div 3 classes with different outline-offset - div have applied only last of class.
My code:
<div class="imgfield effect1 effect2 effect3"> </div>
and example css:
.imgfield { background: url(someimage.jpg); ... width, height etc. }
.effect1 { outline: yellow 2px solid; outline-offset: -4px; }
.effect2 { outline: red 2px solid; outline-offset: -8px; }
.effect3 { outline: blue 2px solid; outline-offset: -12px; }
In this example there will be only blue inner outline but now red niether yellow. How to workaround this?
-----------edit-----------------
All answers are good. I must admit i try handling after and before but i'm not enough familiar with it. Box-sizing: border-box was also important.
to complete #Mr.Alien demo/answer , i would use border's pseudo for a better compatibility.
.effect {
height: 200px;
width: 200px;
outline: 1px solid #000;
position:relative;/* pick as reference for pseudo absolute */
-moz-box-sizing:border-box; /* keep box within size given */
box-sizing:border-box;
}
/* size pseudo within from coordonates */
.effect:before {
content:"";
top:2px;
left:2px;
right:2px;
bottom:2px;
border: green 2px solid;
position: absolute;
}
.effect:after {
content:"";
top:6px;
left:6px;
right:6px;
bottom:6px;
border: red 2px solid;
position: absolute;
}
DEMO
How about using pseudo elements for this? Here, I am using a single class with a single element, but am positioning the pseudo elements i.e :before and :after using position: absolute;.
Demo
You can surely play with z-index if you have any issue with the element overlapping.
.effect {
height: 200px;
width: 200px;
outline: 1px solid #000;
}
.effect:before {
content: "";
height: 200px;
width: 200px;
outline: green 2px solid;
outline-offset: -4px;
display: block;
position: absolute;
}
.effect:after {
content: "";
display: block;
height: 200px;
width: 200px;
outline: red 2px solid;
outline-offset: -8px;
position: absolute;
}
I want to create an upward and downward facing arrow with css like the following: http://apps.eky.hk/css-triangle-generator/
However, instead of a solid color, I want to set it up so the inside is white and there is just a border around the triangle. (So the triangle would be multi-colored, one color on the inside and a different colored border).
Is this possible, and if so, how can it be done?
To create triangles with only CSS we use a zero width/height element with borders:
.arrow-up {
width : 0;
height : 0;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom : 50px solid black;
}
Since we are using borders to create the arrow, we can't just give it a border, but we can overlay one arrow on top of a slightly larger arrow to make the appearance of a border:
HTML --
<div class="top"></div>
<div class="bottom"></div>
CSS --
.top {
position : absolute;
top : 6px;
left : 10px;
width : 0;
height : 0;
z-index : 100;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom : 50px solid black;
}
.bottom {
position : absolute;
width : 0;
height : 0;
z-index : 99;
border-left : 60px solid transparent;
border-right : 60px solid transparent;
border-bottom : 60px solid red;
}
Here is a demo: http://jsfiddle.net/jasper/qnmpb/1/
Update
You can then put both of the triangle DIV elements inside a container and move that container however you want:
HTML --
<div id="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
CSS --
#container {
position : relative;
top : 25px;
left : 25px;
}
Here is a demo: http://jsfiddle.net/jasper/qnmpb/3/
EDIT (2014):
I just came back to this answer and noticed that separate HTML elements are not necessary to create your double-triangle. You can use pseudo-elements, :before and :after. I.e. replace the .top selector with something like .my-element-that-needs-a-triangle:before and the .bottom selector with something like .my-element-that-needs-a-triangle:after.
I think you could get a good idea of what to do by checking out this tutorial on pure css thought bubbles. It's doing what you're looking for.
http://www.sitepoint.com/pure-css3-speech-bubbles/
Depending on how you're using it, you can make a triangle, with a border and even box shadow, without the triangle border hack, using CSS transform: rotate(). See my answer here: https://stackoverflow.com/a/8867645/918414
If you want to create a triangle with borders (or box shadow look-alike) in pure CSS, you should use pseudo-elements :before and :after.
In my example, I added display:inline-block; to the element .arrow-dropdown to be able to create some kind of dropdown menu with a drop shadow. It is followed by .arrow-only which is a a basic triangle with a red border.
body {
margin: 10px;
background: #1670c4;
}
.text {
display: inline-block;
font-size: 15px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
cursor: default;
}
.arrow-dropdown {
display: inline-block;
position: relative;
vertical-align: middle;
margin: 1px 0 0 8px;
width: 8px;
height: 7px;
}
.arrow-dropdown:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 4px 0;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
}
.arrow-dropdown:before {
content: '';
position: absolute;
border-style: solid;
border-width: 8px 5px 0;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
display: block;
width: 0;
z-index: 0;
}
.arrow-only {
position: relative;
vertical-align: middle;
margin: 10px 0 0 8px;
width: 8px;
height: 7px;
}
.arrow-only:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 9px 0;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
}
.arrow-only:before {
content: '';
position: absolute;
border-style: solid;
border-width: 15px 11px 0;
border-color: #f00 transparent transparent transparent;
display: block;
width: 0;
z-index: 0;
margin:-1px 0 0 -2px;
}
<div class="text">
Dropdown text
</div><div class="arrow-dropdown"></div>
<div class="arrow-only"></div>