In this code, I am trying to get a shape as my expectation. But I am failing to do it? Can you please tell me where I am wrong. Why my code is not working as Expected. As per knowledge all classes working properly except marker nose. Why my marker nose style is not working properly? Can you please guide me.
Expectation:
.hoarding_marker{
cursor: pointer;
transform: translateX(50%);
-webkit-transform: translateX(50%);
}
.hoarding_marker_content{
font-size: 12px;
background-color: #697379;
border: 1px solid #fff;
border-radius: 2px;
font-weight: 700;
padding: 4px;
color: #fff;
min-width: 25px;
text-align: center;
white-space: nowrap;
}
.hoarding_marker_nose{
height: 6px;
width: 12px;
border-radius: 100%;
margin: 3px auto 0;
background-color: rgba(0,0,0,.25);
}
.hoarding_marker_nose:before{
margin-top: -3px;
content: "";
height: 0;
width: 0;
position: absolute;
border: 6px solid #fff;
border-color: #fff transparent transparent;
border-width: 6px 6px 0;
margin-left: -6px;
left: 50%;
}
.hoarding_marker_nose:after{
margin-top: -4px;
border-color: #697379 transparent transparent;
content: "";
height: 0;
width: 0;
position: absolute;
border: 6px solid #fff;
border-width: 6px 6px 0;
margin-left: -6px;
left: 50%;
}
<div class="hoarding_marker" style="position: absolute; z-index: 160; transition: opacity 0.4s ease 212ms; opacity: 1;">
<div class="hoarding_marker_content">₹2,193</div>
<div class="hoarding_marker_nose"></div>
</div>
Change the border shorthand property to to border-style: solid on the before element and increase the z-index so it's visible on top of the bubble.
.hoarding_marker{
cursor: pointer;
transform: translateX(50%);
-webkit-transform: translateX(50%);
}
.hoarding_marker_content{
font-size: 12px;
background-color: #697379;
border: 1px solid #fff;
border-radius: 2px;
font-weight: 700;
padding: 4px;
color: #fff;
min-width: 25px;
text-align: center;
white-space: nowrap;
}
.hoarding_marker_nose{
height: 6px;
width: 12px;
border-radius: 100%;
margin: 3px auto 0;
background-color: rgba(0,0,0,.25);
}
.hoarding_marker_nose:before{
margin-top: -4px;
content: "";
height: 0;
width: 0;
position: absolute;
border-style:solid;
border-color: #697379 transparent transparent;
border-width: 6px 6px 0;
margin-left: -6px;
left: 50%;
z-index: 1;
}
<div class="hoarding_marker" style="position: absolute; z-index: 160; transition: opacity 0.4s ease 212ms; opacity: 1;">
<div class="hoarding_marker_content">₹2,193</div>
<div class="hoarding_marker_nose"></div>
</div>
Please use below code:
.hoarding_marker_content{
font-size: 12px;
background-color: #697379;
border: 1px solid #fff;
border-radius: 2px;
font-weight: 700;
padding: 4px;
color: #fff;
min-width: 25px;
text-align: center;
white-space: nowrap;
position: relative;
display:inline-block;
}
.hoarding_marker_content:after {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: '';
border-top: 8px solid #697379;
position: absolute;
bottom: -7px;
left: 0;
right: 0;
margin: 0 auto;
}
<div class="hoarding_marker_content">₹2,193</div>
Try this code this one is like as you expected.
.hoarding_marker{
cursor: pointer;
transform: translateX(50%);
-webkit-transform: translateX(50%);
}
.hoarding_marker_content{
font-size: 12px;
background-color: #697379;
border-top: 3px solid #dccfcf;
border-right: 3px solid #dccfcf;
border-bottom: 8px solid #dccfcf;
border-left: 3px solid #dccfcf;
border-radius: 2px;
font-weight: 700;
padding: 4px;
color: #fff;
min-width: 25px;
text-align: center;
white-space: nowrap;
}
.hoarding_marker_nose{
height: 6px;
width: 12px;
border-radius: 100%;
margin: 3px auto 0;
}
.hoarding_marker_nose:before{
margin-top: -11px;
content: "";
height: 0;
width: 0;
position: absolute;
border: 6px solid #697379;
border-color: #697379 transparent transparent;
border-width: 6px 6px 0;
margin-left: -6px;
left: 50%;
z-index: 1;
}
.hoarding_marker_nose:after{
margin-top: -4px;
border-color: #697379 transparent transparent;
content: "";
height: 0;
width: 0;
position: absolute;
border: 6px solid #fff;
border-width: 6px 6px 0;
margin-left: -6px;
left: 50%;
}
<div class="hoarding_marker" style="position: absolute; z-index: 160; transition: opacity 0.4s ease 212ms; opacity: 1;">
<div class="hoarding_marker_content">₹2,193</div>
<div class="hoarding_marker_nose"></div>
</div>
Related
<span className={style.tooltip}>
<text className={style.textHeaderTooltip}>Telegram token</text>
</span>
.tooltip {
position: absolute;
z-index: 100;
width: 218px;
height: 175px;
box-shadow: 0 15px 20px rgba(19, 43, 95, 0.29);
background-color: #575f7a;
margin-left: 61rem;
margin-top: 23rem;
padding-top: 25px;
padding-left: 25px;
&::after {
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #575f7a;
transform: rotate(-90deg);
}
}
How to make triangle be a part of my tooltip, I can't understand what is the reason that this isn't the same block. What should I do to get a better variant of this tooltip version?
This question already has answers here:
CSS box shadow around a custom shape?
(3 answers)
Closed 5 years ago.
Hi Guys i am trying to add a box shadow around the custom shape created using css
like the below image
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
}
div::after{
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border-top: 22.5px solid transparent;
border-bottom: 22.5px solid transparent;
right: 1px;
transform: translateX(100%);
border-left: 22.5px solid #50b3cf;
}
<div></div>
Declare values for the pseudo-element width & height
properties;
purge the borders;
then rotate the pseudo-element in question;
now apply box-shadow as required;
grab a nice cold one;
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
box-shadow: 0px 0px 5px 3px #000000;
}
div::after {
position: absolute;
z-index: 2;
content: "";
left: 100%;
width: 32px;
height: 32px;
background: #50b3cf;
transform: rotate(46deg);
transform-origin: 0 0;
box-shadow: 3px -3px 5px 0px #000000;
}
div::before { /* ver 2.0 Patch */
content: "";
position: absolute;
background: #50b3cf;
top: 0;
bottom: 0;
width: 25px;
right: 0;
z-index: 9;
}
<div></div>
.box{
border:1px solid white;
width:400px;
height:150px;
margin-left:40px;
box-shadow: 0 0 9px 3px rgba(0,0,0,0.5);
}
.arrow {
width: 100px;
height: 100px;
position: relative;
top:20px;
left:-100px;
overflow: hidden;
box-shadow: 0 10px 10px -17px rgba(0,0,0,0.5);
transform: rotate(270deg);
}
.arrow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: white;
transform: rotate(45deg);
top: 76px;
left: 25px;
box-shadow: -2px -2px 9px 0px rgba(0,0,0,0.5);
}
<div class="box">
<div class="arrow"></div>
</div>
Try this code
Maybe this what you are looking to do.
The first one with box shadow, the second one doesn't has box shadow but you can add it using this code box-shadow: 0px 0px 6px 0px #000;in class "arrow-r"
<style type="text/css">
.main-box{
position: relative;
padding: 0 35px 90px;
}
.box{
font-size: 20px;
position: relative;
display: inline-block;
clear: both;
margin-bottom: 8px;
padding: 13px 14px;
vertical-align: top;
border-radius: 5px;
}
.arrow-l {
float: left;
color: #fff;
background-color: #08abf4; box-shadow: 0px 0px 6px 0px #000;
}
.arrow-r {
float: right;
color: #1a1a1a;
background-color: #e2e2e2;
}
.box:before{
position: absolute;
top: 24px;
width: 8px;
height: 6px;
content: '\00a0';
-webkit-transform: rotate(30deg) skew(-36deg);
transform: rotate(30deg) skew(-36deg);
}
.box.left:before {
left: -4px;
background-color: #08abf4;
}
.box:before{
position: absolute;
top: 21px;
width: 8px;
height: 6px;
content: '\00a0';
-webkit-transform: rotate(30deg) skew(-36deg);
transform: rotate(30deg) skew(-36deg);
}
.box.right:before {
right: -4px;
background-color: #e2e2e2;
}
</style>
<div class="main-box">
<div class="box arrow-l left">
I'm Liam Lababidi
</div>
<div class="box arrow-r right">
What about u?
</div>
</div>
You want to use box-shadow: 10px 10px 5px #888888; for this. Each px indicates what side and the # indicates the color.
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
box-shadow: 0px 10px 5px #888888;
}
div::after{
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border-top: 22.5px solid transparent;
border-bottom: 22.5px solid transparent;
right: 1px;
transform: translateX(100%);
border-left: 22.5px solid #50b3cf;
}
<div></div>
I need an arrow on the right side of the div but this one is not working.
Here is the fiddle:
https://jsfiddle.net/azb5m3r2/2/
The arrow correctly appears on the left side of the div, but I want it to appear on the right side (opposite side).
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
/* .callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
*/
.callout.left:after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
<div class="callout left">test</div>
This works on the left hand side
<div class="callout right">test</div>
Instead of this:
.callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
Use this:
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
And, optionally, for a perfectly centered arrow, use this:
.callout.left::before {
right: -20px;
top: 50%;
transform: translateY(-50%);
border-left: 10px solid #444;
}
revised fiddle
For an explanation of the centering technique, see this post: Element will not stay centered, especially when re-sizing screen
The callout.left must be ::before , not ::after or :after, Same as you give the .callout::before style.
The code should like this
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
I think you may try something like this:
.callout {
position: relative;
top: 0;
left: 0;
display: block;
padding: 10px;
}
.callout.right {
margin-left: 10px;
}
.callout.right::before {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #a8c3e5;
content: '';
}
.callout.right::after {
position: absolute;
top: 50%;
left: 2px;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #f9f9f9;
content: '';
}
.callout-inner {
padding: 2px;
width: 240px;
overflow: hidden;
background: black;
background: #a8c3e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.callout-content {
padding: 14px;
margin: 0;
background-color: #f9f9f9;
color: #39569A;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
<div class="callout right">
<div class="callout-inner">
<div class="callout-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
#right {
background-color: #333;
height: 60px;
position: relative;
width: 150px;
border-radius:5px;
float:right;
font-family:Helvetica;
color:#FFF;
text-align:center;
line-height:55px;
}
#right:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -10px;
}
****
<div id="right">test</div>
https://jsfiddle.net/razia/peeq2aam/
I was trying to make a CSS shape like this. I need to make exact the shape shown in the attached image. How to make this?
Please help.
Fiddle link link
CSS
#activityIcon {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#activityIcon:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
Try this :
UPDATE...
MARKUP:
<div id="activityIcon">
<div class=concaveTop></div>
▴
</div>
STYLE:
#activityIcon {
position: relative;
width: 200px;
height: 100px;
background:#757575;
border-radius: 0 0 30px 30px;
margin:40px auto;
color: #ccc;
font-size: 6em;
text-align: center;
line-height: 100px;
}
#activityIcon:before,#activityIcon:after{
content: '';
position: absolute;
width:0;
height:0;
}
#activityIcon:before{
border-left: 20px solid transparent;
border-top: 81px solid #757575;
left: -18px;
}
#activityIcon:after {
border-right: 20px solid transparent;
border-top: 81px solid #757575;
right: -18px;
}
.concaveTop:before, .concaveTop:after{
content: '';
position: absolute;
width: 34px;
height: 32px;
}
.concaveTop{
position: absolute;
top: 0;
width: 314px;
height: 28px;
left: -50px;
overflow: hidden;
box-shadow: 0 -4px 0 #757575;
}
.concaveTop:before{
left: 1px;
box-shadow: 20px -24px 0 3px #757575;
border-radius: 50%;
}
.concaveTop:after{
right: 15px;
box-shadow: -18px -24px 0 3px #757575;
border-radius: 50%;
z-index: 1;
}
DEMO
MARKUP:
<div id="activityIcon">
▴
</div>
STYLE:
#activityIcon {
position: relative;
width: 200px;
height: 100px;
background:#333;
border-radius: 0 0 30px 30px;
margin:40px auto;
color: #ccc;
font-size: 6em;
text-align: center;
line-height: 100px;
}
#activityIcon:before,#activityIcon:after {
content: '';
position: absolute;
width:0;
height:0;
}
#activityIcon:before{
border-left: 20px solid transparent;
border-top: 81px solid #333;
left: -18px;
}
#activityIcon:after {
border-right: 20px solid transparent;
border-top: 81px solid #333;
right: -18px;
}
I'm not sure if my answer provides anything that kougiland's doesn't, but I did it so I figured I might as well post it.
It looks like this.
Here's the codepen.
The HTML looks like this.
<div class="tab-bar">
<div class="tab">▴</div>
<div class="tab">▴</div>
<div class="tab">▴</div>
</div>
The CSS looks like this.
body {
background-color: #eee;
}
.tab-bar {
overflow: hidden;
text-align: center;
}
.tab {
margin: 0 1.55rem;
color: #999;
display: inline-block;
position: relative;
top: 0.1rem;
width: 9rem;
font-size: 3rem;
line-height: 3rem;
background-color: #666;
transform: perspective(4rem) rotateX(-20deg);
border-radius: 0 0 1rem 1rem;
}
.tab::before,
.tab::after {
content: " ";
display: block;
position: absolute;
width: 1rem;
height: 1rem;
top: -1rem;
border-color: #666;
border-style: solid;
}
.tab::before {
left: -1rem;
border-radius: 0 2rem 0 0;
border-width: 1rem 1rem 0 0;
}
.tab::after {
right: -1rem;
border-radius: 2rem 0 0 0;
border-width: 1rem 0 0 1rem;
}
I have the following CSS that creates a blue speech bubble (JS fiddle: http://jsfiddle.net/C5N2c/:
<div class="bubble">Content</div>
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
I want to add a 1px red border around the edge of this bubble, including the small speech arrow. How can I do this? It needs to be IE8 compliant.
Take a look a this Fiddle, though I havent been able to test in IE8..
The CSS:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: red solid 1px;
z-index:2;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 9px 9px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -9px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 12px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -12px;
left: 24px;
}
See working version on jsFidde
I did it sometime ago, you can just change the colours, It's not tested on IE, I am currently on OSX and it's a mess trying to view it on IE xD
html:
<div class="dialog">
<div class="triangleOutline">
<div class="triangle"></div>
</div>
<div class="dialogBox">
Hello!<br>
I'm a full CSS fancy dialog box :D
</div>
</div>
css:
body{
font-size: 100%;
font-family: "Arimo";
background: #eee;
}
.triangle,
.triangleOutline{
position:relative;
width: 0;
height: 0;
border: solid transparent;
border-width: 7px;
border-bottom-color: #aaf;
}
.triangleOutline{left: 15px;}
.triangle{
top: -6px; /* outline's width - 1 */
left: -7px; /* outline's width */
border-bottom-color: white;
}
.dialogBox{
background: white;
border: 1px solid #aaf;
padding: 0.75em;
border-radius: 3px;
min-height: 1.5em;
line-height: 1.5em;
}
Just change the colors as you like, I guess you are not using THOSE colors right? XD
Try this code:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
box-shadow: 0 0 0 1px red;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -19px;
left: 21px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
See this jsfiddle.