I have the following css arrow fiddle:
<div class="arrow"></div>
.arrow { background-color: #F4922D; width: 300px; background: rgba(244,146,45,0.9); padding: 40px 30px; min-height: 100px; position: relative; }
.arrow:after { left: 100%; top: 0; bottom: 0; border: solid transparent; content: " "; width: 0; position: absolute; pointer-events: none; border-color: rgba(244, 146, 45, 0); border-left-color: #F4922D; border-width: 90px; }
My questions are
1: how would I make the arrow tip thinner - ie at the moment to get the point it has to be 90px border-width but I would like the point to show at around 30px but if I change the border width the point just gets cut off
2: how would I make the tip opaque, I tried using border-color: rgba(244, 146, 45, 0.5); but that didn't change anything
Adjust only the width of the left border on it to get the 'thin-ness' I think you mean. To make give the tip the same transparency as the <div> itself, again, you need to target only the left border:
.arrow:after {
left: 100%;
top: 0; bottom: 0;
border: solid transparent;
content: " ";
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-left-color: rgba(244,146,45,0.9);
border-width: 90px;
border-left-width: 160px;
}
JSFiddle
To solve the opacity issue,
just simply set
opacity: 0.9;
on the pseudo :after element that should solve the issue,
and if you want a cross browser implementation of it then take a look at this
http://css-tricks.com/snippets/css/cross-browser-opacity/
Related
I have a dialogue box or a arrow box which should be set to max height of 60%, and all the content inside the box overflows via scroll, this is the markup:
<div class="cart">
hello world
</div>
and here is the css to make a arrow-head on top:
.cart {
position: fixed;
background: #ffffff;
opacity: 1;
box-shadow: 1px 1px 10px;
border-radius: 5px;
margin-left: 74.8%;
width: 300px;
top: 70px;
padding: 13px;
z-index: 20;
text-align: center;
display: none;
max-height: 60%;
overflow: auto;
}
.cart:after, .cart:before {
top: -20px;
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.cart:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}
.cart:before {
border-color: rgba(12, 143, 176, 0);
border-bottom-color: #999;
border-width: 11px;
margin-left: -11px;
}
if I remove the "overflow" property the arrow head shows up, but when I use it, which I have to It disappears, I want both, an arrow head and scrollable div, but I think the arrowhead just gets inside the scroll. is there any solution for this?
Thanks for the help
I can't find what I need. I have this code
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
read More
</hgroup>
I want the link to have a border with a down triangle at the bottom. But it has to be transparent, because it goes in front of an image. Is that possible?
The shape given in question is a bit complex to achieve with full transparency because of the area cut by the arrow having to be transparent too. Because of this, the techniques that are generally used for creating such tool-tip like shapes cannot be used as-is here. However, there is a still a way to achieve it using CSS and it is as follows:
Use the parent hgroup for the shape with borders on top, left and right and add border-radius. Don't add any border to the bottom because then cutting the space for the arrow would be tough.
Use two pseudo elements (:before and :after) which have the same height as the parent but lesser width such that they produce a tiny gap when positioned absolutely with respect to parent. Add border-bottom alone to these pseudo-elements.
Add a pseudo-element for the arrow on the arrow-down element (a) and create the arrow using rotate(45deg) transforms instead of using the border trick. The transform method is very helpful for creating transparent arrows. Position this arrow again absolutely with respect to the parent.
As we are dealing with transforms, triangle shapes etc the position values need to be calculated based on Math theorems.
* {
box-sizing: border-box;
}
.container {
height: 300px;
width: 500px;
background: url(http://lorempixel.com/500/300/nature/2);
padding: 10px;
}
#subheader {
position: relative;
width: 400px;
height: auto;
border: 1px solid black;
border-bottom: none;
border-radius: 12px;
padding: 10px;
}
.arrow-down{
display: inline-block;
}
.arrow-down:after {
position: absolute;
content: '';
bottom: -10px; /* half the height of the element */
left: 50px; /* some aribitrary position */
height: 20px;
width: 20px;
transform: rotate(45deg);
transform-origin: 50% 50%; /* rotate around center which is at 60px from left */
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#subheader:after {
position: absolute;
content: '';
left: 74px; /* center point of arrow + 1/2 of hypotenuse */
height: 100%;
width: calc(100% - 74px); /* 100% - value of left */
bottom: 0px;
border-bottom: 1px solid black;
border-bottom-right-radius: inherit; /* same border-radius as parent */
}
#subheader:before {
position: absolute;
content: '';
height: 100%;
width: 46px; /* center point of arrow - 1/2 of hypotenuse */
left: 0px;
bottom: 0px;
border-bottom: 1px solid black;
border-bottom-left-radius: inherit; /* same border-radius as parent */
}
<div class='container'>
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
Read More
</hgroup>
</div>
Here is a working version of what you're after.
HTML
<div style="display:none" class="tri-down">Your Content will go into this fancy tri-down</div>
CSS --- I ADDED a background img to show that its transparent as you said that you were going to be having an image behind it.
body {
background: #333 url("http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg") fixed;
}
.tri-down {
/* Styling block element, not required */
position: relative;
margin-bottom: 2em;
padding: 1em;
width: 75%;
border: 1px solid #999;
background: #f3f3f3;
border-radius:5px;
opacity: 0.5;
/*you may want to set the z-index level of your tri-down box.
z-index: 100;
*/
}
/* Required for Down Triangle */
.tri-down:before, .tri-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
/* Stroke */
.tri-down:before {
bottom: -16px;
left: 21px;
/* If 1px darken stroke slightly */
border-top-color: #777;
border-width: 16px;
}
/* Fill */
.tri-down:after {
bottom: -15px;
left: 22px;
border-top-color: #f3f3f3;
border-width: 15px;
}
JSFIDDLE HERE
http://jsfiddle.net/LZoesch/dk43s2qz/
You will want to hide the DIV that is going to house your content. I added it to the above HTML code.
style="display:none"
Then you want to call the link on click and toggle the div class tri-down on/off
<script type="text/javascript">
$(function(){
$('#').click(function(){
$('#').toggle();
$('#').toggle();
});
});
</script>
Here is your orignal code.
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
read More
</hgroup>
If you dont want to set the opacity if your div, you can also try this below.
body {
background: url(http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg);
font-family: sans-serif;
text-align: center;
}
body > div {
color: #000;
margin: 50px;
padding: 15px;
position: relative;
}
.tri-down {
border: 5px solid #000;
content: "";
position: absolute;
}
you can try this one:
.tri-down {
/* Styling block element, not required */
position: relative;
margin-bottom: 2em;
padding: 1em;
border: 1px solid #999;
background: #f3f3f3;
border-radius:5px;
}
/* Required for Down Triangle */
.tri-down:before, .tri-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
/* Stroke */
.tri-down:before {
bottom: -16px;
left: 21px;
/* If 1px darken stroke slightly */
border-top-color: #777;
border-width: 16px;
}
/* Fill */
.tri-down:after {
bottom: -15px;
left: 22px;
border-top-color: #f3f3f3;
border-width: 15px;
}
DEMO
You may need to overlay two images and absolutely position them. Like something along the lines of:
body{
padding:2em;
}
#subheader h1{
font-size:1.5em;
margin-top:0;
}
#subheader h2{font-size:1.2em;}
#subheader
{
position: relative;
max-width:300px;
min-height:1.5em;
padding: 20px;
background: #FFFFFF;
border: #dedede solid 2px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#subheader:after
{
content: "";
position: absolute;
bottom: -19px;
height:13px;
widht:12px;
left: 10%;
border-style: solid;
border-width: 20px 13px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
#subheader:before
{
content: "";
position: absolute;
bottom: -22.5px;
left: calc(10.5% - 3px) ;
border-style: solid;
border-width: 23px 15px 0px;
border-color: #dedede transparent;
display: block;
width: 0;
z-index: 0;}
Like in this pen
I'm doing a pentagon with css shapes and for some reason, the image is not staying inside. I've tried many things such a position absolute and moving the image inside the shape with the top and left properties but it does not work. It stays outside. Any ideas why this is happening?
Here's the css for my pentagon:
.pentagon {
margin-top: 200px;
position: relative;
width: 250px;
border-width: 130px 50px 0;
border-style: solid;
border-color: rgba(191, 191, 191, 0.6) transparent;
}
.pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -255px;
left: -50px;
border-width: 0 175px 125px;
border-style: solid;
border-color: transparent transparent rgba(191, 191, 191, 0.6);
}
And here's the CSS for the image:
.logo-sponsor{
z-index: 1000;
position: relative;
width: 200px;
height: auto;
margin: 0 auto;
display: block;
}
Here's a fiddle with the demo.
Here's how it currently looks:
This is easy to change :
.logo-sponsor{
z-index: 1000;
position: absolute;
top: -200px;
left: 20px;
demo
But seriously, it's a bad idea to try to compose a logo like this : it's so much easier, and more powerful, to use an image. You could also use a character for this shape : ⬟
I was working on folded paper effect and this seems to work on almost all browsers except IE8.
Here is the JSBIN code : http://jsbin.com/oLepimiK/6/edit
I saw a different question on SOF where :before and :after tags are supported, but I guess I am missing something here. Can someone point that out to me?
MY IE8 MODE:
I believe that box-shadow is not supported in IE8, so the shadow under the 'fold' will not appear.
CanIUse.com
It is working, you are having problems with Z-INDEX, and I changed the top and left to -1.
.clear{
padding-left: 30px;
}
.complaint:after {
border-color: transparent #F58C1E #F58C1E transparent;
border-style: solid;
border-width: 10px;
content: "";
left: 0;
position: absolute;
top: 0;
z-index: 12;
}
.complaint:before {
border-color: white #A65807 #A65807 white;
border-style: solid;
border-width: 11px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
content: "";
left: -1px;
position: absolute;
top: -1px;
width: 0;
z-index: 11;
}
.complaint {
background-color: #F58C1E;
border-style: solid;
border-width: 1px 1px 0;
padding: 4px;
position: relative;
}
RESULT:
Hi I have done a speech bubble but I want to get the background image to come into the arrow as well. I did find some examples as well but editing them to fit my needs is confusing because I cant position the arrow to the place I want it to be in the end.
.bubble {
position: relative;
width: 227px;
height: 310px;
background-color:white !important;
background: url(../images/thepartypeople/assets/main-bg.png) repeat 0 0;
}
.bubble:after {
content: "";
position: absolute;
top: 128px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 1;
}
This is my code that I have for my speech bubble.
Any help would be appriciated
Thanks alot.
Here is the question answered elsewhere
Creating a transparent arrow above image in CSS3
But, I'll give you the HTML and CSS for your specific answer. I changed your HTML a little bit by the way.
<div class="bubble">
<img class="test" src="http://placekitten.com/241/310" alt="kitten" />
</div>
You can keep it with just the div .bubble and have background: url('http://placekitten.com/241/310'); but the image would have to be exactly the height and width of the div.
.bubble {
position:relative;
width:241px;
height: 310px;
}
.bubble:before, .bubble:after {
content:'';
position:absolute;
width:0;
border-left:15px solid white;
left:0;
}
.bubble:before {
top:0;
height:128px;
border-bottom:15px solid transparent;
}
.bubble:after {
top:143px;
bottom:0;
border-top:15px solid transparent;
}
.test {
display:block;
width:100%;
}
Here is a fiddle http://jsfiddle.net/WUXQd/2/ the fiddle has comments in it explaining a bit how it works.
EDIT: By the way this creates a mask around the image and two reverse triangles to make it look like there is a transparent triangle.
is this similar to what you wanted?
.bubble {
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: url(border.jpg) repeat 0 0;
}
.bubble:after {
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
border-image: url(border.jpg);
}
EDIT: This link can help you: http://www.sitepoint.com/pure-css3-speech-bubbles/