Is it possible to achieve something like this (straight line "cut" with a kind of arrow / triangle 30 pixels from the left) fully in CSS? (did this using adobe fireworks but want to get rid of images as much as possible on my website).
Here is what I have tried without success: http://jsfiddle.net/U8AF6/
Many thanks
CSS
body {
background: red;
}
.arrow_box {
position: relative;
background: #88b7d5;
border: 1px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 10%;
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: red;
border-width: 16px;
margin-left: -16px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 22px;
margin-left: -22px;
}
You can use pseudo elements for that.
Please see Nicolas Gallagher's experiment for more: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
The basic code is:
.triangle:before,
.triangle:after {
content: "";
position: absolute;
bottom: -15px; /* value = - border-top-width - border-bottom-width */
left: 30px;
border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */
border-style: solid;
border-color: #aaa transparent;
}
.triangle:after {
bottom: -14px; /* -1px of first element for border */
border-color: #fff transparent;
}
Please see an implementation here: http://dabblet.com/gist/11146863
This only works on solid background.
it's possible with some css3 transformations(in ways i consider "dirty") and if you want to support older browsers css3 is out of question
here:Fiddle
.bottom-line{
border-bottom:1px solid #999;
}
.bottom-line:after{
content:"";
display:block;
margin-bottom:-8px;
border-right:1px solid #999;
border-bottom:1px solid #999;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
width:12px;
height:12px;
background-color:#fff;
z-index:200px;
margin-left:100px;
}
also check #drublic's answer.
If you need to support older browsers(pre ie9),your other option is creating a small down arrow picture, place it after some 1px border and give the image an -1px margin so it overlaps the border.
Related
I'm trying to make something like this:
I'd like to use pure CSS. Bootstrap v3 is already loaded.
I've gotten pretty close with something like
.bubble {
position:relative;
left: 15px;
padding: 10px;
background: #FFFFCC;
margin: 5px 5px;
max-width: 250px;
border: #FFCC00 solid 1px;
}
.bubble:before {
position:absolute;
content: "";
top:15px;left:-10px;
border-width: 10px 15px 10px 0px;
border-color: transparent #FFFFCC;
border-style: solid;
}
But the result is not quite what I'm looking for.
I've searched around and fiddled a bit, but have not found an elegant solution that fits my needs.
Years ago I would have done this with tables and images, but surely there's a better way in 2015?
Here is a 2015 version...
.bubble {
position: relative;
background: #FFFFCC;
border: 1px solid #FFCC00;
max-width:250px;
padding:10px;
font-family:arial;
margin:0 auto;
font-size:14px;
border-radius:6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #FFFFCC;
border-width: 15px;
margin-top: -15px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #FFCC00;
border-width: 16px;
margin-top: -16px;
}
SEE IT IN ACTION:
http://jsfiddle.net/ajahb5p1/
NOTE:
You can adjust the size of the arrow simply by changing the border-width and margin-top values in the .bubble:after definition (currently set to 15px and -15px)
To make sure it retains it's border, you would also need to change these same 2 values in the .bubble:before definition (currently set to 16px and -16px)
Following is my jsfiddle which works fine without overflow:hidden but I have to use this property cause if I dont use it i am not able to put ... when there is an overflow of text above certain width. Kindly help me how Display arrow when there is overflow:hidden?
http://jsfiddle.net/rP5q3/1/
.arrow_box {
position: relative;
background: #1D2027;
border: 4px solid #1D2027;
width:50%;
color:white;
display:inline-block;
float:left;
margin-left:2px;
color:#FFF;
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden !important;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(29, 32, 39, 0);
border-left-color: #1D2027;
border-width: 14px;
margin-top: -14px;
}
.arrow_box:before {
border-color: rgba(29, 32, 39, 0);
border-left-color: #1D2027;
border-width: 20px;
margin-top: -20px;
}
You can use jQuery to run what you are trying. Of course is an example, if you could explain a bit more what are you trying to do I think I will be able to make a simple code to make it work with jQuery.
var arrowBox = $("div").find(".arrow_box");
if (arrowBox.css({"overflow" : "hidden"}){
// jQuery code to display the arrow when "overflow:hidden;"
};
Here you have a demo on JSFiddle.
I'm trying to create an effect where I have a transparent arrow above any image in CSS3. See the following image.
Any ideas how to do this effect? Using LESS if that comes to any help.
To draw a transparent / inverted triangle in CSS3
you could use the CSS3 triangle technic, and make the inverted shape by combining the :before and :after pseudo objects, each to draw one part of the triangle.
You could do something like this:
.image {
position:relative;
height:200px;
width:340px;
background:orange;
}
.image:before, .image:after {
content:'';
position:absolute;
width:0;
border-left:20px solid white;
left:0;
}
.image:before {
top:0;
height:20px;
border-bottom:16px solid transparent;
}
.image:after {
top:36px;
bottom:0;
border-top:16px solid transparent;
}
here is an illustrative jsfiddle
I just used a plane orange background for the example ... but you can change it to image, and you hopefully get what you wanted =)
Edit: and a more final result could then be something like this
I think you need something like this:
.arrow {
bottom: -25px;
left: 30px;
width: 40px;
height: 40px;
position: absolute;
overflow: hidden;
}
.arrow:after {
content: ' ';
display: block;
background: red;
width: 20px;
height: 20px;
transform: rotate(45deg);
position: absolute;
top: -19px;
left: 3px;
background: #999;
border: 5px solid rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
You may have probably seen this type of boxes with a triangular arrow tip on Facebook, Google, Twitter, etc. Fortunately, I've also created one with pure CSS.
Here is the code:
HTML :
<div class="box"><h3>This box contains a triangular arrow tip on top of it.</h3></div>
CSS :
.box { position: relative; background: #fff; color: #000; padding: 8px; border: 1px solid #ccc; }
.box:after {content: ""; position: absolute; display: block; width: 0; top: -15px; right: auto; bottom: auto; left: 5px; border-width: 0 10px 15px; border-style: solid; border-color: #fff transparent; }
You can see that the triangular tip is pure white color. And if you study the CSS you'll see that the white color of the tip is actually the color of the border.
Now what I'm looking for is a (gray coloured, for example) border or outline on the surface of the triangular tip. Because the color of the tip comes from the border, I can't use a second border because there is no such thing. I've tried outline but it doesn't seem to work. Any help how to do this with pure CSS?
Make use of the :before pseudo-element to place a similar arrow behind the first one.
This is the technique used on http://cssarrowplease.com.
See it in action based on your example.
.box:before {
content:"";
position: absolute;
display: block;
width: 0;
top: -16px;
right: auto;
bottom: auto;
left: 3px;
border-width: 0 12px 17px;
border-style: solid;
border-color: #ccc transparent;
z-index: -1;
}
Don't use borders to create the triangle. Simply use a pseudo-element on which you apply a CSS transform.
DEMO
Result:
HTML:
<ul class='drop-down'>
<li><a href='#'>Suggestions</a></li>
<li><a href='#'>Friends (8)</a></li>
<li><a href='#'>Friend Requests</a></li>
<li><a href='#'>My Requests</a></li>
<li><a href='#'>People I blocked</a></li>
</ul>
Relevant CSS:
.drop-down {
position: relative;
border: solid 1px #ccc;
background: white;
}
.drop-down:before {
position: absolute;
top: -.56em; left: 1em;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
width: 1em; height: 1em;
transform: rotate(45deg);
background: inherit;
content: '';
}
/* variations */
.drop-down:first-child:before {
transform: rotate(60deg) skewX(30deg) scaleY(.866);
}
.drop-down:nth-child(3):before {
border-right: solid 1px #ccc;
border-left: none;
transform: rotate(-60deg) skewY(30deg) scaleX(.866);
}
You can do this with with the UTF-8 "up arrow" and a bit of absolute positioning and a text shadow:
Your container:
.boxArrow {
margin-top:30px;
height:100px;
width:100px;
border:1px solid #000000;
position:relative;
}
The arrow:
.boxArrow:before {
content: "\25B2";
font-size:16px;
color:#ffffff;
position:absolute;
top:-15px;
left:30px;
text-shadow: -1px 0 black, 0 1px white, 1px 0 black, 0 -1px black;
}
For simplicity, easy and fast work, you can use jQuery UI : http://jqueryui.com/tooltip/#custom-style
We're trying to create an HTML page that consists of masonry-style floated elements that contain a picture and title. The elements have a shadow and the page has a slight gradient background. Targets that have already been visited have a folded corner.
The folded corner causes a couple of problems:
1) How can we make the element's box-shadow end before the folded corner on the right and bottom sides? Will we have to do the shadows the pre-CSS3 way with divs containing semi-transparent gradients?
2) How to do the folded corner itself? We can't just impose an image on the right bottom corner on top of the white background, because the page's background gradient must show through.
So far, I've thought of four ways of doing this:
Method 1: The idea behind this one is to use two pseudo-elements on the .box to get the corner and then two pseudo-elements on the .box-text to get the shadows in the corners right - demo. The biggest problem with this one is that it is... well, ugly.
HTML structure:
<div class="box">
<header></header>
<div class="box-text">
<p>Text</p>
</div>
</div>
Relevant CSS:
body {
background: #ccc;
}
.box {
box-shadow: 2px 2px 13px #000;
position: relative;
background: white;
}
.box:before, .box:after, .box-text:before, .box-text:after {
position: absolute;
content: '';
}
.box:before {
bottom: -25px;
right: -25px;
width: 75px;
height: 75px;
background: #ccc;
}
.box:after {
bottom: 0;
right: 0;
width: 50px;
height: 50px;
box-shadow: -2px -2px 2px #777;
background: linear-gradient(-45deg, transparent 38%, #333 50%, #faf0f0 50%);
}
.box-text:before {
bottom: 32px;
right: -15px;
width: 15px;
height: 18px;
background: radial-gradient(top left, #333 0%, transparent 40%);
}
.box-text:after {
bottom: -15px;
right: 32px;
width: 18px;
height: 15px;
background: radial-gradient(top left, #333 0%, transparent 40%);
}
Method 2: combine shadows in a nicer manner using a skewed pseudo-element for that particular corner (I would have shadows on the pseudo-element) - demo
I think this one looks nicer and also has the advantage of working in IE9 as well (the previous one didn't, since it made use of CSS gradients).
The HTML would be exactly the same and the CSS would become:
.box {
box-shadow: 0 0 5px 1px #777;
position: relative;
background: white;
}
.box:before, .box:after, .box-text:before {
position: absolute;
z-index: 2;
content: '';
}
.box:before {
bottom: -38px;
right: -38px;
width: 71px;
height: 71px;
transform: rotate(45deg);
z-index: 1;
background: #ccc;
}
.box:after {
bottom: 0;
right: 0;
border: solid 23px #f9f0f0;
border-bottom-color: transparent;
border-right-color: transparent;
box-shadow: -1px -1px 2px #777;
z-index: 4;
}
.box-text:before {
right: 0;
bottom: 22px;
width: 47px;
box-shadow: 2px 2px 3px 1px #777;
transform: skewY(-45deg);
}
Method 3: I got an idea from the previous method - demo. I think the previous one looks slightly nicer though...
CSS that has changed:
.box:before {
bottom: -24px;
right: -7px;
width: 35px;
height: 70px;
box-shadow: inset 2px 0 3px 1px #999;
transform: rotate(45deg);
z-index: 1;
background: #ccc;
}
.box:after {
bottom: 0;
right: 0;
border: solid 23px #f9f0f0;
border-bottom-color: transparent;
border-right-color: transparent;
box-shadow: -1px -1px 2px #777;
z-index: 4;
}
.box-text:before {
bottom: -27px;
right: -10px;
width: 35px;
height: 70px;
transform: rotate(45deg);
background: #ccc;
}
Method 4: Uses just 2 pseudo-elements, both on the box - demo
.box:before, .box:after {
position: absolute;
z-index: 2;
content: '';
}
.box:before {
right: -8px;
bottom: 22px;
width: 65px;
box-shadow: 2px 2px 5px 1px #777, 0 25px 0 25px #ccc;
transform: rotate(-45deg);
}
.box:after {
bottom: 0;
right: 0;
border: solid 23px #f9f0f0;
border-bottom-color: transparent;
border-right-color: transparent;
box-shadow: -1px -1px 2px #777;
z-index: 4;
}