I have no idea how can I put an arrow in the same color of my div pointing to the IMAGE text.
Some ideas? how can I do this?
https://jsfiddle.net/fvvrLqLp/
#arrow{
background-color:#FFD600;
color:#fff;
border-radius:15px;
padding:5px;
z-index:999;
max-width:150px;
}
html:
image<br><br>
<div id="arrow">
text
</div>
thank you friends!
I suppose you're looking for something like that:
#arrow {
background-color: #FFD600;
color: #fff;
border-radius: 15px;
padding: 5px;
z-index: 999;
max-width: 150px;
position: relative;
}
#arrow:before {
position: absolute;
top: -10px;
left: 20px;
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #ffd600;
}
An example: https://jsfiddle.net/fvvrLqLp/1/
You need to create the triangle with css into a pseudo element and position it accordingly to the needed position.
Related
Hi I am trying to create a custom arrow in CSS that looks like the image below.
Ideally I want to create this by overlaying two shapes a triangle and a rectangle (maybe using CSS :after and :before) but I'm not too savvy when it comes to CSS so I have been struggling.I started by just using borders but doesn't look like it is going to work
So far I just have:
.arrow {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid #ccc;
}
<div class="arrow"></div>
Not too hard to make using the :before pseudo element and some transforms:
.container {
padding: 100px;
}
.arrow {
display: inline-block;
height: 150px;
background: #000;
width: 75px;
}
.arrow:before {
content: "";
border-top: 100px solid #000;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
transform: rotateZ(180deg) translateY(100%) translateX(31%);
position: relative;
display: inline-block;
}
<div class="container">
<div class="arrow"></div>
</div>
Here's another option.
.arrow{
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid #ccc;
position: relative;
margin: 0 0 0 100px;
}
.arrow::before{
content: "";
height:50px;
width:80px;
background: #ccc;
position: absolute;
top: 0;
margin: -100%;
display: block;
transform: translateX(-160%) translateY(-50%);
}
<div class="arrow"></div>
Create one rectangle and then add triangle on top with :before pseudo-element and that is it.
.arrow {
width: 36px;
height: 50px;
background: #3F3F3F;
position: relative;
margin: 60px;
}
.arrow:before {
content: '';
border-style: solid;
border-width: 0 40px 40px 40px;
border-color: transparent transparent #3F3F3F transparent;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
}
<div class="arrow"></div>
To explain and demonstrate:
A CSS arrow is created by coloring 1 border side, and then moving the other 3 sides in towards the middle of the shape as transparent so they don't show but cut the remaining colored side into a triangle. The shorthand for this is TOP RIGHT BOTTOM LEFT. So to make a triangle pointing upwards you use the third property or bottom.
Using pseudo elements (incase you want the arrow added to another element) you need content:'' to "create" the pseudo element. I've set them as display: block so that they are in the flow and interact with eachother (rather than being laid on top of one another).
By giving the rectangle position: relative you can then use left: 30px (half of the triangle width) to position it in the middle of the triangle.
.arrowWrapper:before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 60px 60px 60px;
border-color: transparent transparent black transparent;
/* border-color: TOP RIGHT BOTTOM LEFT; */
}
.arrowWrapper:after {
content: '';
position: relative;
display: block;
width: 60px;
height: 60px;
background: black;
left: 30px;
}
<div class="arrowWrapper"></div>
Lifted and modified from http://www.cssportal.com/css3-shapes/:
#eq-triangle {
width: 0;
height: 0;
border-bottom: 104px solid blue;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
#rectangle {
width: 40px;
height: 80px;
background: blue;
margin-left: 40px;
}
<div id="eq-triangle"></div>
<div id="rectangle"></div>
How would I achieve the following as seen in the image below, in the best way as possible? I want a thick top border, but as it goes down I want the sides to become thinner and just "mend" (if that's right expression) into the black block.
This is my CSS code for the black block:
.containerMain {
background: #000;
padding: 15px;
border-radius: 5px;
width: 250px;
}
You can use the after pseudo-element to position an upside-down trapezoid behind your element.
Look here for a trapezoid shape example.
body { padding: 30px; }
.containerMain {
background: black;
padding: 15px;
border-radius: 5px;
width: 250px;
height: 250px;
position: relative;
}
.containerMain:after {
content: '';
border-radius: inherit;
margin: -20px;
margin-top: -25px;
width: 100%;
height: 50%;
position: absolute;
z-index: -1;
/* upside-down red trapezoid props */
border-top-width: 150px;
border-top-style: solid;
border-top-color: red;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
<div class="containerMain"></div>
This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 7 years ago.
I have a css arrow top that I want to display in the top of the div, like this:
the problem is, the arrow is inside the div...
what is wrong here?
#news {
position:absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#news:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
https://jsfiddle.net/3huzc74a/
Your positioning code was just a little bit off. The best way to position the arrow pseudoelement (thanks to #vals) is to use bottom: 100% along with margin: auto, left: 0, and right: 0. That way your arrow will always stay in the correct position even if you decide to change the arrow's size.
Here is a working live demo:
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
}
#bellnews:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
<div id=bellnews>
</div>
JSFiddle Version: https://jsfiddle.net/3huzc74a/3/
Using absolute positioning with left:calc(50% - 5px); will always keep it in the middle no matter the width.
Here's a fiddle
#bellnews {
position:relative;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
display:inline-block;
}
#bellnews:before {
content: "";
position:absolute;
bottom:100%;
width: 0;
height: 0;
left:calc(50% - 5px);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
<div id=bellnews>
</div>
Try this one with position relative on parent and absolute on child:
#bellnews {
position:relative;
width: 140px;
height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#bellnews:before {
content: "";
position: absolute;
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
top: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
https://jsfiddle.net/3huzc74a/2/
You need to make :before pseudo element absolute .
Then use top to control the position of the pseudo element.
This is a nice tutorial to understand the basics.
Working code
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
width: 100px
}
#bellnews:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
position: absolute;
top: -5px;
}
<div id=bellnews>
</div>
If you make the position on the #news div relative, and the triangle absolute, it should work.
Updated your fiddle: https://jsfiddle.net/3huzc74a/7/
#bellnews {
position: absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#bellnews:before {
content: "";
position: absolute;
top: -5px;
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
I have a testimonials box that I would like to add a triangle to.
.arrow {
float: left;
margin-left: 25px;
margin-top: 20px;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-left: 0px solid transparent;
border-right: 25px solid transparent;
}
The problem is the triangle ends up being solid, as opposed to white with a gray border. Below is a screenshot of how the CSS currently displays. Thanks in advance for the time and help.
You can create two triangles, one that overlaps the other, to create this bordered effect. You can do this with the ::before and ::after pseudo-elements so that you don't even have any superfluous HTML.
http://jsfiddle.net/7K2c4/
.mybox {
position: relative;
border: 1px solid #ccc;
}
.mybox:before,
.mybox:after { position: absolute;
left: 20px;
bottom: -19px;
display: block;
width: 0;
height: 0;
border-width: 0 25px 20px;
border-style: solid;
border-color: transparent;
border-left-color: #fff;
content: ' ';
}
.mybox:before { left: 19px;
bottom: -21px;
border-left-color: #ccc; }
You can place another triangle over it, smaller with the same color of the box background. You don't even need to create another HTML element, just use a pseudo-element selector.
I would like to create this using only CSS. Is this possible? If so, can you guys help me out?
Fairly easy with borders and a pseudo element:
ALL
#button::after {
content: "";
border: 64px solid transparent;
border-top: 12px solid orange;
position: absolute;
top: 29px;
left: 0;
}
DEMO
Try to experiment with this basic button:
.btn {
width: 100px;
height: 30px;
text-align: center;
border: 0;
}
.btn-arrow {
position: relative;
background: coral;
}
.btn-arrow:after {
border: solid transparent;
content:"";
position: absolute;
border-top-color: coral;
border-width: 16px 50px;
left: 0px;
top: 100%;
margin-top: 0px;
}
http://jsfiddle.net/dfsq/tNjCb/1/
how about something like the following:
http://jsfiddle.net/WDCu3/
<div id="test">Testing</div>
<div id="arrow"></div>
#test {background-color:red; width:100px;}
div {text-align:center;}
#arrow {
border-top: 15px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width:0;
}