I am trying to achieve the folded paper effect as shown in the attached image:
I tried different combinations of :before on my containing div with different borders, but I can't get the triangle in the direction I want.
Edit:
Here are the styles I ended up using, based on ExtPro's answer:
<div class="folded_menu">
<div class="fold"></div>
<div class="paper"></div>
</div>
.
.fold {
position: absolute;
left: -25px;
top: 12px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 25px 90px 0;
border-color: transparent #BCC7B6 transparent transparent;
}
.paper {
padding: 1em;
background: $nav-top; /* Old browsers */
border: 2px solid white;
}
Bonus question: is it possible to have the shadow on the fold as well?
You can do this with (fiddle):
Edit: And because I'm in a good mood this morning, here's another fiddle closer to your example
HTML:
<div class='fold'></div><div class='paper'></div>
CSS:
body{
background:grey;
}
.fold{
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 10px 30px 0;
border-color: transparent #aeaeae transparent transparent;
display:inline-block;
}
.paper{
height:50px;
width:100px;
background:white;
display:inline-block;
}
Related
I want to add triangle arrow to right side of image, image have border-radius: 50%
i made it with adding second div for arrow, and moving it to place i want, but how can i make it correctly without using second div.
This how it looks like:
https://jsfiddle.net/kani339/0xeu28q5/1/
HTML:
<img src="https://www.aviary.com/img/photo-landscape.jpg" class="photo">
<div class="arrow"></div>
CSS:
.photo {
border-radius:50%;
width: 200px;
height: 190px;
border: 5px solid #41454f;
}
.arrow {
position:relative;
left:205px;
bottom: 115px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #41454f;
}
I think you're looking for something like pseudo element? By using pseudo element, we can attach additional element to an element. This feature lets you have additional element without writing second <div>.
The example below uses pseudo element :before to the .photo element. But keep in mind that this feature doesn't work with <img> tag, so you need to use your image as background instead. Check out the demo below
.photo {
border-radius:50%;
width: 200px;
height: 190px;
border: 5px solid #41454f;
background: url("https://www.aviary.com/img/photo-landscape.jpg") no-repeat center center / cover;
background-position: initial;
position: relative;
}
.photo::before {
content: "";
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #41454f;
}
<div class="photo"></div>
I'm not sure of a pure CSS solution.
You can do it with jQuery, like this:
$(function() {
$('.photo').after('<div class="arrow"></div>');
});
Here's a demo
Credit to Christopher Harris
I am having a simple div with header,content and footer.Now my issue is that there is a gap at the bottom of my div.And if I resize browser window some more extra white-space is adding at the bottom of my div.
The entire leftContainer should be of browser height.
For example I need something like this(actually this is done n flash I want it to be done in HTML)
This is how it looks now:
Here is my CSS:
html, body
{
margin: 0;
border: 0 none;
padding: 0;
overflow: hidden;
}
html, body, #wrapper, #left, #right
{
height: 100%;
min-height: 400;
}
.leftContainer
{
width:308px;
max-height: 100%;
height:100%;
border-style: solid;
border-width: 2px 0px 0px 0px;
background-color: #ffffff;
box-shadow: 0px 0px 7px #292929;
-moz-box-shadow: 0px 0px 7px #292929;
-webkit-box-shadow: 0px 0px 7px #292929;
}
.mainbody
{
padding-left: 5px;
margin-top: 0;
min-height: 150px;
max-height:736px;
height: 100%;
background-color: #F9F9F9;
}
.header
{
height: 40px;
color: #000;
border-bottom: 1px solid #EEE;
}
.footer
{
padding-left:20px;
height: 40px;
background-color: whiteSmoke;
border-top: 1px solid #DDD;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
HTML:
<div class="leftContainer ">
<div class="header">Header</div>
<div class="mainbody">
<p>Body</p>
</div>
<div class="footer">Footer</div>
</div>
I don't want the footer to be seperate it should be within its parent div(leftContainer)
DEMO
Have you tried adding
position: relative;
To your .leftContainer and
position: absolute;
bottom: 0;
left: 0;
right: 0;
to your .footer ? Should make what you want.
Take a look : http://jsfiddle.net/UqJTX/7/embedded/result/
There is some issue with shadows, they are added to length in some browsers, so try to put only side shadows and apply negative margin.
Have you tried adding
position: absolute;
bottom: 0;
left: 0;
right: 0;
top:0;
overflow:auto;
To your .leftContainer and
position: absolute;
bottom: 0;
left: 0;
right: 0;
to your .footer ? Should make what you want.
You have to mention the width of each div in percentages. Total left container height is 100% then decide the height for the three divs (like header 10%, body 85% and footer 5%) with appropriate percentages. Mentioning the heights or widths in pixel is not suggestible.
Use firebug for easy debugging of HTML and CSS.
check out this DEMO it works properly
Use this like min-height:100%
may it will useful to you
A friend, produced this code, and I have refined it a little to suit our purposes. As we need white bg with 1px border version as per my fiddle.
However the arrow does not render in Safari and Internet Explorer.
Any suggestions: fiddle: http://jsfiddle.net/ozzy/vHLJU/2/
Code: css
#container{
position:relative;
margin:10px;
}
.rectangle{
position:absolute;
width: 200px;
height: 100px;
background: #fff;
border:1px solid #aaa;
}
.small-rectangle{
position: absolute;
top: 25px;
left: 200px;
width: 100px;
height: 50px;
background:#fff;
border:1px solid #aaa;
border-left:2px solid #fff;
}
.magicrect{
position:absolute;
top: 0px;
left: 200px;
width: 99px;
height: 100px;
border-right:1px solid #aaa;
border-left:none;
}
.arrow-right{
position: absolute;
top: 0px;
left: 300px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #fff;
}
html is:
<div id="container">
<div class="rectangle"></div>
<div class="magicrect"></div>
<div class="small-rectangle"></div>
<div class="arrow-right"></div>
</div>
Should look like this ...
this is the best I got. you need 2 triangles on the end, one for the dark outline, and another to fill in the middle with white.
Edit: fixed the 1 pixel gap. you need to change the order of the html, and make the border bigger of offset it by -1 on the top, and -1 to the left.
Change your html to this
<div id="container">
<div class="rectangle"></div>
<div class="arrow-right dark"></div>
<div class="magicrect"></div>
<div class="small-rectangle"></div>
<div class="arrow-right"></div>
</div>
and add the css class
.dark {
top:-1px;
border-left: 52px solid #aaa;
border-top:51px solid transparent;
border-bottom:51px solid transparent;
left:299px;
}
this sets the first arrow that is behind the second arrow to have a dark color, and then pushes it out by 1 pixel so that it shows from behind the second arrow.
You can create a masked triangle to go behind the actual one as seen in this example:
http://jsfiddle.net/BqGyU/
Basically the concept is to create two triangles. It appears the original concept was to have a white triangle (using a border to create it) on an off color background. This is fine, but when you want a border around that, you can't use the border property. To get around this you can create another triangle under it with the border color. This is then off set to give the effect of a border.
.arrow-right-top{
position: absolute;
top: 1px;
left: 300px;
width: 0;
height: 0;
border-top: 49px solid transparent;
border-bottom: 49px solid transparent;
border-left: 49px solid #fff;
}
.arrow-right-bottom{
position: absolute;
top: 0px;
left: 300px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #aaa;
}
How to make a box with arrow in CSS?
Making round corner is easy. but any idea to make the arrow on left side without using image.
Is it possible to make possible with
only one elements <p>....</p>
body {
background: #ff004e;
padding: 40px
}
p {
background: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 250px;
height: 150px
}
<p></p>
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
Chris Coyier has an excellent roundup of the possible shapes built in CSS using a single element (and before/afters):
http://css-tricks.com/examples/ShapesOfCSS/
Standard Tool-tip
If you want a simple arrow, then you can add a pseudo element with border-right.
body {
background:#ff004e;
padding:40px;
}
p {
background:white;
border-radius: 10px;
width:250px;
height:150px;
position: relative;
display: inline-block;
}
p:before {
content:"";
position: absolute;
height: 0px;
width: 0px;
top: 60px;
left: -29px; /* 1px buffer for zooming problems while rendering*/
border-width: 15px;
border-color: transparent white transparent transparent;
border-style: solid;
}
<p></p>
FIDDLE 1
Flat edge Tool-tip
If you want a flat edge for arrow, try this :
body {
background: #ff004e;
padding:40px;
}
p {
background:white;
border-radius: 10px;
width:250px;
height:150px;
position: relative;
display: inline-block;
}
p:before {
content:"";
position: absolute;
height: 45px;
width: 16px; /* 1px buffer for zooming problems while rendering*/
top: 50px;
left: -15px;
background: white;
}
p:after {
content:"";
position: absolute;
height: 40px;
width: 15px;
border-radius: 0 40px 40px 0;
top: 75px;
left: -15px;
background: #ff004e;
box-shadow: 0 -45px 0 0 #ff004e;
}
<p></p>
FIDDLE 2
Use this online tool and you can do it without typing lot of code
http://www.cssarrowplease.com
My answer (with no flat edge),
added some calculation formula:
.mainBox {
border: solid 1px #e0e0e0;
}
.mainBox:before {
content:"";
position: absolute;
/*The right value must be calculated with: (top value of after) - (top value of before) = (right value of before) */
/*example: (-4px) - (-7px) = 3px*/
right: 72px;
/*The `top` value must be identical to border-width*/
top: -7px;
width: 0;
height: 0;
border-style: solid;
/*The `border-width` value must be identical to top*/
border-width: 0 7px 7px 7px;
/*The border color 3rd (#e0e0e0) value must be identical to its parent border color*/
border-color: transparent transparent #e0e0e0 transparent;
/*The (z-index of before) must at least one below the (z-index of after)*/
/*Example: (z-index of before) < (z-index of after) or 9998 < 9999*/
z-index:9998;
}
.mainBox:after {
content:"";
position: absolute;
right: 75px;
top: -4px; /*suppose to be identical to border-width*/
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: transparent transparent #fff transparent;
z-index:9999;
}
The basic rules are:
The before right value must be calculated with:
(after's top) - (before's top) = (before's right)
example: (-4px) - (-7px) = 3px
The before and after's top value must be identical to border-width.
The border color 3rd (#e0e0e0 in the example) value must be identical to its parent border color.
The before's z-index must at least one below the after's z-index.
example: (before's z-index) < (after's z-index) or 9998 < 9999.
The result:
a.right{ border-style: dashed;
border-color: transparent;
border-width: 0.53em;
display: -moz-inline-box;
display: inline-block;
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0; border-left-width: 1em;
border-left-style: solid;
border-left-color: #666;
left: 0.25em; }
the above code can be used for right arrow.
You can make use of span if u don't want to use a div.
span#pointer{border:solid 10px transparent;border-right-color:#fff;position:absolute;margin:-85px 0 0 -20px;}
http://jsfiddle.net/SSKwn/
Any idea on how I can get round corners work with multiple borders?
The box will be dynamic, depending what will be inputed into the box, so I can't add static width or height.
body { background: #d2d1d0; }
#box {
border-radius: 15px;
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 100%;
height: 100%;
margin: 10px auto;
position: relative;
}
DIV#box, #box:before, #box:after {
-moz-border-radius: 15px;
border-radius: 15px;
}
#box:before {
border-radius: 15px;
border: 1px solid white;
width: 99%;
height: 94%;
content: '';
position: absolute;
}
#box:after {
border-radius: 15px;
content: '';
position: absolute;
border: 1px solid #bbbbbb;
width: 98%;
height: 90%;
left: 1px; top: 1px;
}
HTML
<div id="box">Hello World!!!!<br>THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</div>
The problem I am currently having is when I stretch window not all borders stretch symmetrically, so how can I fix that? FYI I am currently interested getting CSS working in FF and Chrome.
There are a few ways to get multiple borders with round corners. I personally go for a method that uses shadows. For your html code you could do something like this.
The HTML
<div id="box">
Hello World!!!!<br>
THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.
</div>
The CSS
#box{
border-radius: 15px;
background: #f4f4f4;
border: 3px solid #bbbbbb;
box-shadow: 0 0 0 3px #8B2323,
0 0 0 6px #FF7F00,
0 0 0 9px #458B00;
width: 100%;
height: 100%;
margin: 10px auto;
position: relative;
}
Demo: http://jsfiddle.net/GdSfh/
I suggest if you want to find out more on multiple borders please read my tutorial on Multiple borders in css as it has a few other methods that might help you in the future. If you want to find more about shadows please also refer to my tutorial Shadows in css.
<div id="box">
<p>Hello World!!!!<br>
THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</p>
Above is for the HTML, below is for the CSS.
body { background: #d2d1d0; }
#box {
background: #F4F4F4;
border: 3px solid blue;
position: relative;
height: 100%;
width: 100%;
}
#box p {
padding: 10px;
}
#box:before {
-moz-border-radius: 15px;
border-radius: 15px;
}
#box {
-moz-border-radius: 9px;
border-radius: 9px;
}
#box:after {
-moz-border-radius: 12px;
border-radius: 12px;
}
#box:before {
border: 3px solid red;
content: '';
position: absolute;
top: -9px;
right: -9px;
bottom: -9px;
left: -9px;
}
#box:after {
border: 3px solid green;
content: '';
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
}
http://jsfiddle.net/H7QjP/7/ [Live Example with code]
Like this. Credits to to jnpcl for giving me something to build off, I just changed the border radii so that they lined up a little tighter.
The only CSS solution I can offer is limited to a double border, with the space between those borders the same colour as the background of the bordered element, for example the html:
<div id="box">
<p>Some content</p>
</div>
Coupled to the css:
#box {
border: 10px double #f90;
border-radius: 1.5em;
padding: 1em;
color: #000;
background-color: #ffa;
}
Gives a JS Fiddle demo...
Just found another cleaner way to do it
Live demo and code here: http://jsfiddle.net/mYGsh/1/
[This demo has 8 different borders]
The HTML:
<p class="gradient-border">This is an example of a box with a gradient border. This example will currently work in Mozilla and Firefox browsers.</p>
The CSS:
.gradient-border {
border: 8px solid #000;
-moz-border-radius: 12px;
-moz-border-bottom-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
-moz-border-top-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
-moz-border-left-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
-moz-border-right-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
padding: 5px 5px 5px 15px;
}
I came up with this code for a linked image using an inline block border wrapped in a box shadow with a 2nd box shadow for a 2 layer border with a shadow, 3 layers total & No css styling needed.
inline block creates the 1st border then a box shadow creates the 2nd & icing on the cake adds the shadow followed by the rounding code that captures the inline block border as well.
To use it for text, just change image style to span style & replace image src with text & remove the link if you don't need it.
<a href="http://url" target="_blank">
<img style="display:inline-block;padding:1px;padding-left:2px;padding-top:10px;padding-bottom:10px;width:130px;border: 5px solid#001aff; box-shadow:0px 0px 0px 1px #000000, 0px 0px 25px 14px #001EA3;background: #000000;
border-radius: 5px;
-moz-border-radius: 5px
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;"
src="http://image.gif" height="41" align="absmiddle" /></a>
I suggest using the excellent jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
To add to David's solution :
The double border is fairly limited. However, if you are willing to modify your markup, you can solve your problem by doing :
<div id="outerbox">
<div id="box">Hello World!!!!<br>THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</div>
</div>
In your CSS :
#box
{
border-radius: 15px;
border: 1px solid #bbbbbb;
width: 100%;
height: 100%;
position: relative;
}
#outerbox
{
padding:10px;
border : 1px solid #bbbbbb;
background: #f4f4f4;
border-radius: 15px;
}
This will allow you to set the background color between the two borders to what you want.
It will also let you play with the width of your border.
http://jsfiddle.net/rPsdK/1/
Try this one:
Live Demo
<style type="text/css">
body { background: #d2d1d0; }
#box {
background: #F4F4F4;
border: 1px solid blue;
position: relative;
height: 100%;
width: 100%;
}
#box p { padding: 10px; }
#box, #box:before, #box:after {
-moz-border-radius: 15px;
border-radius: 15px;
}
#box:before {
border: 1px solid red;
content: '';
position: absolute;
top: -7px;
right: -7px;
bottom: -7px;
left: -7px;
}
#box:after {
border: 1px solid green;
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
</style>
<div id="box">
<p>Hello World!!!!<br>
THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</p>
</div>