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 : ⬟
Related
I'm trying to create a curved triangle to be put next to a 'chat message box'.
See this example:
As you can see in between the 'E' and the actual message box there is a little 'triangle' but its shape isnt made of a straigt line, instead it's a little bit curved.
On top of that, I would like to add a box-shadow to my triangle.
Here's the code that I have tried:
width: 0px;
height: 0px;
border-top: 32px solid transparent;
border-bottom: 0px solid transparent;
border-right: 22px solid white;
position: absolute;
left: -10px;
bottom: 0;
box-shadow: 0 2px 6px rgba(0,0,0,.9);
And it gives me this result: (I have purposefully added a super dark box-shadow so that it easier to understand my problem.)
So, to recap, what I'd like to achieve:
A triangle that has one of its line curved as in the very first picture
a box shadow around that triangle, that 'fits' with the other box shadow of the other element.
Thanks !
Based on a previous answer, you can add a drop-shadow filter to a shape created using radial-gradient for the curve:
.userMsgBottom {
position: relative;
color:#fff;
max-width: 250px;
background-color: #2e7384;
margin: 30px 50px;
padding: 10px;
border-radius: 6px;
filter:drop-shadow(0 0 5px #000);
}
.userMsgBottom:after {
content: "";
position: absolute;
bottom: 0px;
right: -23px;
width: 30px;
height: 25px;
background: radial-gradient(circle at top right, transparent 60%, #2e7384 62%);
}
.left.userMsgBottom:after {
content: "";
position: absolute;
bottom: 0px;
left: -23px;
width: 30px;
height: 25px;
background: radial-gradient(circle at top left, transparent 60%, #2e7384 62%);
}
<div class="userMsgBottom">
Some text here Some text here Some text here
</div>
<div class="userMsgBottom left">
Some text here Some text here Some text here
</div>
Safari doesn't support the syntax with at, here is another syntax for better support:
.userMsgBottom {
position: relative;
color:#fff;
max-width: 250px;
background-color: #2e7384;
margin: 30px 50px;
padding: 10px;
border-radius: 6px;
filter:drop-shadow(0 0 5px #000);
}
.userMsgBottom:after {
content: "";
position: absolute;
bottom: 0px;
right: -23px;
width: 30px;
height: 25px;
background:
radial-gradient(circle, transparent 60%, #2e7384 62%) bottom left/200% 200%;
}
.left.userMsgBottom:after {
content: "";
position: absolute;
bottom: 0px;
left: -23px;
width: 30px;
height: 25px;
background:
radial-gradient(circle, transparent 60%, #2e7384 62%) bottom right/200% 200%;
}
<div class="userMsgBottom">
Some text here Some text here Some text here
</div>
<div class="userMsgBottom left">
Some text here Some text here Some text here
</div>
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
So assuming I have the below triangle. Without adding any html or tags how could I go about positioning the text into the center of the triangle?
Fiddle: http://jsfiddle.net/3LXaD/
You will notice the white text in the top right corner of the triangle. I understand a triangle is a large border around the shape. Is this even possible?
CSS
div:nth-of-type(1) {
width: 0;
height: 0;
border-style: solid;
border-width: 0 150px 130px 150px;
border-color: transparent transparent #d30000 transparent;
line-height: 0px;
_border-color: #000000 #000000 #d30000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
div {
font-size: 16px;
color: #FFFFFF;
text-align: center;
}
HTML
<div>This is a triangle</div>
Without extra markup try this:
div:nth-of-type(1):before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 150px 130px 150px;
border-color: transparent transparent #d30000 transparent;
line-height: 0px;
_border-color: #000000 #000000 #d30000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
position: absolute;
top: 0;
z-index: -1;
left: 50%;
margin-left: -150px;
}
div {
font-size: 16px;
color: #ffffff;
text-align: center;
line-height: 130px;
position: relative;
}
Here is an example.
Ciao
Ralf
Wrap the text in the span and position it absolutely:
JSfiddle
span{
position: absolute;
top: 80px;
left: 33%;
}
<div><span>This is a triangle</span></div>
Here would be the solution if you were to use a pseuedo element. (not best practice)
div:after{
content: 'This is a triangle';
color: white;
position: absolute;
top: 80px;
left: 33%;
}
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/
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/