How to make a box with arrow in CSS?
Like this :
.arrow {
border: solid 10px transparent;
border-right-color: #FFF;
}
Demo : http://jsfiddle.net/sparkup/edjdxjf2/
UPDATE :
It can also be achieved without empty elements with the css property :before
element:before {
content: "";
position: absolute;
top: 50%; // half way down (vertical center).
margin-top: -15px; // adjust position, arrow has a height of 30px.
left:-30px;
border: solid 15px transparent;
border-right-color: #FFF;
z-index: 1;
}
Demo : http://jsfiddle.net/sparkup/y89f1te0/
hope it helps
css box with arrow and shadow
Well, actually it's impossible to do this since your triangle is a shadow.
But!
Since your triangle has a 90 degree angle, you could use a rotated square with a shadow :)
I put the rotated square with the shadow in the :after part, and to hide the part in the top shadow of the popup box, I used a triangle with no shadow in the :before (as you had in the beginning).
Fiddle
.notesdisplay3:before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
height: 0;
width: 0;
border: 28px solid transparent;
border-bottom-color: #f5f5f5;
margin-left: -28px;
}
.notesdisplay3:after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
height: 40px;
width: 40px;
background-color: #f5f5f5;
margin-left: -20px;
margin-bottom: -20px;
z-index: -1;
box-shadow: 0 0 5px #CCC;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
Box with Arrow top and Border
Here's updated fiddle: FIDDLE.
You can try with this CSS:
#log2 {
border: 1px solid #ccc;
border-radius: 3px;
width: 300px;
padding: 10px;
margin: 15px auto 0;
position: relative;
background: #fff;
}
#log2:after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-color: #ccc;
border-width: 1px 0 0 1px;
width: 15px;
height: 15px;
top: -9px;
right: 19px;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
However, this includes transform property which is a new feature and might not work in every browser.
Other solutions are fine but they won't let you add border to this little triangle. You pick the one that suits you.
EDIT:
Yet another fiddle: http://jsfiddle.net/dAdry/22/.
I also figured out how to do this without transform. You put two triangles, one grey and one white a little bit smaller.
#log2 {
border: 1px solid #ccc;
border-radius: 3px;
width: 300px;
padding: 10px;
margin: 15px auto 0;
position: relative;
background: #fff;
}
#log2::before, #log2::after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-width: 0 10px 10px 10px;
right: 19px;
}
#log2::before {
border-color: #ccc transparent;
top: -10px;
right: 19px;
}
#log2::after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-color: #fff transparent;
border-width: 0 10px 10px 10px;
top: -9px;
}
Try it out and let me know if it suits you.
Creating box having css arrow using css3
For navigation you can add <a> tag in your html page and for color of the class .box:after change the border color as below:
HTML:
<a href="http://www.w3schools.com" target="_blank"><div class="box"></div></a>
CSS:
.box:after {
content: '';
position: absolute;
left: 43%;
top: 30%;
margin-top: -18px;
border-style: solid;
border-width: 40px;
border-color: transparent transparent transparent **rgba(7, 17, 241, 1);** }
FIDDLE
Box with arrow without using pseudo-elements
Based on this previous answer I will adjust slightly the code to have a transparent background. There is two main tricks. Half the coloration of the pseudo element to avoid the intersection with the main element and the use of gradient on the main element to create the border top and create the hole for the pseudo element:
body {
margin:0;
background-image:linear-gradient(to right,yellow,pink);
}
.box {
border: 2px solid red;
border-top:transparent; /*make border-top transparent*/
margin: 50px;
height: 50px;
position:relative;
/* Use gradient to mimic the border top with a transparent gap */
background:
linear-gradient(red,red) left top /calc(50% - 10px*1.414) 2px,
linear-gradient(red,red) right top/calc(50% - 10px*1.414) 2px,
rgba(0,255,0,0.4);
background-repeat:no-repeat;
}
.box:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-top: 2px solid red;
border-left: 2px solid red;
top: -11px;
left: calc(50% - 11px);
transform: rotate(45deg);
background:linear-gradient(-45deg,transparent 50%,rgba(0,255,0,0.4) 50%);
}<div class="box">
</div>How to design the div box with arrow by using css according to my example?
try this
.bread-list>.bread-item {
background: #B7B7B7;
font-size: 20px;
color: #FFFFFF;
padding: 20px;
margin-top: 2px;
position: relative;
}
.bread-item::after {
content: '';
position: absolute;
left: 50%;
background: #B7B7B7;
width: 20px;
height: 20px;
border: solid #FFFFFF;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
clear: both;
bottom: -16px;
z-index: 1;
}
How can I create a popup box with arrow with a box shadow also?
This doesn't necessarily solve the shape problem, but you can use filter: drop-shadow to get a single shadow on the entire element instead of having a separate one for the arrow.
.audio-arrow-box {
position: fixed;
top: 30%;
background: white;
border-radius: 6px;
display: block;
/* replaced box-shadow with filter */
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
width: 284px;
height: 200px;
z-index: 99;
margin-left: 50px;
}
.audio-arrow-box::after {
z-index: -99;
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: 0;
bottom: 0;
top: calc(25% - 5px);
left: 0;
box-sizing: border-box;
border: 5px solid #fff;
border-color: transparent transparent #fff #fff;
transform-origin: 0 0;
transform: rotate(45deg);
/* removed box-shadow rule */
}
.audio-arrow-box::before {
z-index: 10;
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: 0;
bottom: 0;
top: calc(25% - 5px);
left: 0;
box-sizing: border-box;
border: 5px solid black;
border-color: transparent transparent #fff #fff;
transform-origin: 0 0;
transform: rotate(45deg);
}<div class="audio-arrow-box"></div>Arrow Box with CSS
I created your element with the surrounding 1px border. I'm using one <div> element and taking advantage of the :before and :after pseudo-elements (browser-support). The main rectangle has a regular 1px border, but the triangle elements are essentially 2 triangles, one darker than the other.
The lighter triangle sits on top of the darker triangle, which has the effect of hiding it, and is shifted slightly to the left to show the darker triangle underneath. The resulting illusion is a 1px dark border on the triangle itself.
Here's a question that asks a similar question:
How can I create a "tooltip tail" using pure CSS?
One of the answers actually has a great explanation of how one can achieve this triangle effect:
https://stackoverflow.com/a/5623150/196921
Also, this is an excellent reference for all the fancy things you can do with borders (thanks to PSCoder):
- http://css-tricks.com/examples/ShapesOfCSS/
... and here's a sweet css generator (thanks to David Taiaroa):
- http://cssarrowplease.com/
Anyway, here's the corresponding code:
#arrow {
width: 128px;
height: 100px;
background-color: #ccc;
border: 1px solid #999;
position: relative;
}
#arrow:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #ccc;
}
#arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #999;
}<div id="arrow"></div>Related Topics
Difference Between Float and Align Property in CSS
Cannot Understand the Use of :Host in Components in Angular2
CSS Scroll Snapping, Vertical Not Working
@Font Face Choppy Font in Chrome
Customize a Select with Font-Awesome
Combine Calc() with Attr() in CSS
Sass Mixin for Animation Keyframe Which Includes Multiple Stages and Transform Property
Add Bullet Styling to Dd Element
How to Change Background-Color on Text Links on Hover But Not Image Links
Why We Always Use <Ul> to Make Navigation Why Not <Ol>
How to Make a CSS Triangle with Smooth Edges
I Need a Max-Margin CSS Property, But It Doesn't Exist. How Could I Fake It
Are There Specific CSS Selectors Targeting Ie10
Can You CSS Blur Based on a Gradient Mask
Why Are Inline-Block Elements Not Displayed Correctly in Internet Explorer 8