I have a css tooltip on my html. I get the arrow mark(bubble:after) at the bottom of my bubble. How can I re-arrange to right center of my bubble?
Here is my div
<div class="bubble">Hi there. I like turtles.</div>
<p style="margin-left: 1em;">Mikey sez</p>
The bubble which is displayed on my div is from the css below
<style type="text/css">
.bubble {
position: relative;
background-color:#eee;
margin: 0;
padding:10px;
text-align:center;
width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
}
.bubble:after { //This after mark has to be arranged so to point to the right of bubble
position: absolute; //The position should be at the center
display: block;
content: "";
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
}
Rearrange like below image
Check out this jsFiddle. All you need to do is change the absolute positioning of the ::after element, and switch which border has a colour, from this:
border-color: blue transparent transparent transparent;
bottom:-19px;
left:1em;
To this:
border-color: transparent transparent transparent blue;
bottom:25%;
right:-19px;
This will do the trick, http://jsfiddle.net/elclanrs/hu38A/1
.bubble:after {
content: "";
position: absolute;
border-color: transparent transparent transparent red;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
top: 50%;
margin-top: -10px; /* border-width */
right: -20px; /* border-width*2; */
}
Related
First of all, this question might be similar to this, but the shape in my case is different, so it couldn't really help me out.
The trapezoid code is the following:
#light {
/*setting the element*/
border-bottom: 164px solid grey;
border-left: 148px solid transparent;
border-right: 165px solid transparent;
height: 0;
width: 80px;
}
<div id="light"></div>
Just to clarify, I am trying to add the shadow effect, similar to the following example:
#bulb {
/*setting the element*/
background: grey;
width: 200px;
height: 200px;
border-radius: 50%;
/*adding "light" (shadow)*/
box-shadow: 0 0 100px 10px rgba(128, 128, 128, 0.5);
}
<div id="bulb"></div>
When I try to add the regular box-shadow:, my trapezoid becomes a regular rectangle with white parts.
Instead of a box-shadow you could use a drop-shadow filter, e.g.
filter: drop-shadow(0 0 40px #222);
#light {
/*setting the element*/
border-bottom: 164px solid grey;
border-left: 148px solid transparent;
border-right: 165px solid transparent;
height: 0;
width: 80px;
filter: drop-shadow(0 0 40px #222);
}
<div id="light"></div>
More info on MDN
I would create the shape differently using pseudo element with a blur effect:
#light {
width:400px;
height:160px;
position:relative;
}
#light:before,
#light:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:
/*triangle on the right*/
linear-gradient(to top right,grey 49.5%,transparent 50%) right/150px 100%,
/*triangle on the left*/
linear-gradient(to top left, grey 49.5%,transparent 50%) left /150px 100%,
/*rectangle at the center*/
linear-gradient(grey,grey) center/100px 100%;
background-repeat:no-repeat;
}
#light:before {
filter:blur(20px);
}
<div id="light">
</div>
based on css-tricks Double-Box Method you can "have a container box with hidden overflow and another box inside it which is rotate and hangs out of it"
.light {
width: 350px;
height: 135px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}
.light:after {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: #999;
transform: rotate(45deg);
top: 25px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
<div class="light"></div>
In your example, you can't add a proper box-shadow without having these white parts on each side. That is because the CSS border colouring the grey shaped trapeziod DIV.
In the example above, they are using an .SVG file (image), since it is an image, the original shape of it is a trapezoid, not a rectangle with white side like yours.
You will need to draw an .svg in the shape and color you want, and then add a shadow to the element itself.
Here are more informations about SVG.
I hope it helps.
I am having trouble with making triangle shaped button using css and it is bit buggy and how can i fix it?
There is a fiddle here:
https://jsfiddle.net/Adrianalings/jy11o85s
.btn {
position: fixed;
bottom: 50%;
height: 0px;
background-color:transparent;
border-top: 15px solid transparent;
border-left: 20px solid red;
border-bottom: 15px solid transparent;
}
Here is the solution =)
.btn {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 50px 0 50px 86.6px;
border-color: transparent transparent transparent #C40006;
background-color:transparent;
}
<button class="btn"></button>
I have the following plunker where I have created a triangle using CSS.
CSS:
.triangle {
border: inset 6px;
content: "";
display: block;
height: 0;
width: 0;
border-color: transparent transparent red transparent;
border-bottom-style: solid;
position: absolute;
top: 50px;
left: 50px;
z-index: 89;
}
HTML:
<div class="triangle">
</div>
In my AngularJS project, this triangle is created when I call a dropdown directive as defined here.
The problem is that I want to give this triangle and the dropdown popup a box shadow. I am able to apply it on the popup (which is essentially just a 'ul' list) but I am struggling with the triangle. How can I apply box shadow to the triangle?
.triangle {
position: relative;
margin: 0;
box-sizing: border-box;
background: red;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after {
content: "";
position: absolute;
top: 50px;
left: 50px;
width: 0;
height: 0;
box-sizing: border-box;
border: 6px solid black;
border-color: transparent transparent red red;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>
Here is the HTML and CSS to create the desired effect.
Since the triangle is actually a hack (three of the four borders of the block element are transparent), the box-shadow property will not work as expected, because it still sees the element to which you apply this 'hack' as rectangular, so the box-shadow is applied accordingly.
The result is in this fiddle.
.triangle:before {
border: inset 6px;
content: "";
display: block;
height: 0;
width: 0;
border-color: transparent transparent red transparent;
border-bottom-style: solid;
position: absolute;
top: 50px;
left: 50px;
z-index: 89;
box-shadow: 0px 0px 2px 2px #AAA;
}
<div class="triangle">
</div>
I have one question with inverted triagle image overlay. I have created this DEMO from codepen.io.
What i want in my demo you can see there is a bubble div inside an image. a triangle on the right side of the image looks.I would like it to appear in the triangle in the picture. How can i do this anyone can help me ?
CSS:
.bubble
{
position: fixed;
width: 345px;
height: 235px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: #d8dbdf solid 1px;
-webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
-moz-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
right: -10px;
top: 16px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #d8dbdf;
display: block;
width: 0;
z-index: 0;
right: -11px;
top: 16px;
}
.film_bilgileri{
float:left;
width:345px;
height:235px;
background-color:red;
}
.film_kapak{
float:left;
width:345px;
height:120px;
background-color:white;
overflow:hidden;
}
.film_kapak img {
width:100%;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-webkit-backface-visibility: hidden;
}
HTML:
<div class="container">
<div class="bubble">
<div class="film_bilgileri">
<div class="film_kapak">
<img src="abc.jpg">
</div>
</div>
</div>
</div>
One way is to create a transparent triangle using white borders, and masking above and below using an element with white background.
transparent triangle using white masking is created by:
border-left: 11px solid transparent;
border-top: 11px solid white;
border-bottom: 11px solid white;
working example: http://jsfiddle.net/064ojpm8/
(note - it's not production material, but merely to give you the idea)
If you want your triangle point towards your image, you can use the code from Sgoldy in your :after pseudo-element:
.bubble:after {
content: '';
position: absolute;
width: 0;
border-right: 11px solid white;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
z-index: 1;
right: 0px;
top: 36px;
}
I just moved the element to the left with right: 0px; and altered the border values.
You don't need the :before
DEMO
How to ignore transparent place on hover event ? In the first picture i need ignore "THIS PLACE". I need hover on rhombus works only.
<img src='http://s30.postimg.org/xpd6gwla9/1_Copy.jpg' id="first">
#first:hover {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
You can't. You might be able to using an SVG element (not in an <img> tag), but with a normal image the bounding box will always be rectangular, and any box shadows or other styles will be applied to that box instead of the contours of your image.
Instead of using image you can create your own rhombus and then apply hover to it like below
FIDDLE DEMO
<div id='container'>
<div id='diamond'></div>
</div>
CSS
#diamond {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: red;
position: relative;
top: -100px;
}
#diamond:after {
content:'';
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: red;
}
#diamond:hover {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
#container {
width:200px;
height:200px;
border:3px solid;
}
Hope this is what you were looking for
Demo
css
a {
display:block;
height:165px;
width:165px;
background:transparent;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform: rotate(45deg);
text-align: center;
margin: 37px;
}
.bg {
position: absolute;
background:url('http://s30.postimg.org/xpd6gwla9/1_Copy.jpg');
background-repeat: no-repeat;
height: 300px;
}
html
<div>
<div class="bg">
<div></div>
</div>
</div>