This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 5 years ago.
I am making Div with top right arrow and having contents in that.
Just like in the
.arrow_box {
position: relative;
background: #FFF;
border: 2px solid #fff;
box-shadow: 0px 0px 5px #000;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 99%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #FFF;
border-width: 15px;
margin-left: -15px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #FFF;
border-width: 21px;
margin-left: -21px;
}
<div class="arrow_box">DO You Really Want this Feature?</div>
Somehow i can't get my output.
Any Help Would Be Great?
Thank You
body {
padding: 3em;
font-family: sans-serif;
}
.arrow_box {
position: relative;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
padding: 1em 2em;
color: #aaa;
}
.arrow_box::after,
.arrow_box::before {
content: "";
background-color: #fff;
position: absolute;
top: 0;
left: 100%;
height: 1em;
width: 1em;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
transform-origin: center center;
transform: translate(-2em, -.5em) rotate(45deg);
z-index: -1;
}
.arrow_box::before {
z-index: 1;
box-shadow: none;
}
<div class="arrow_box">DO You Really Want this Feature?</div>
Related
I wanted to add property further on clock so added a outline type effect property .
But whenever I hover on element parent element hover property is also activated . Know this is type bubbling/capturing effect in JS and also this is how CSS works.
Plz CSS only if possible : may be JS can be used like this
onhover="func()"
getElementId().style.boxShadow = " "
have to add to every element
Can it be possible have outline property on hovered element only .
Any suggestion on better property for outline-radius or outline effect with radius are very needed
Thanks for help
#clockOuterCircle {
display: flex;
justify-content: center;
align-items: center;
width: 42vw;
height: 42vw;
margin: auto;
border-radius: 50%;
border: 4px solid rgb(255, 62, 62);
background-color: rgb(253, 133, 133);
user-select: none;
}
#clockOuterCircle:hover {
box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}
#clockInnerCircle {
position: relative;
width: 38vw;
height: 38vw;
text-align: center;
padding: 0%;
border-radius: 50%;
border: 6px solid black;
background-color: white;
}
#clockInnerCircle:hover {
box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}
#clockStyleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
#clockStyleCircle:hover {
box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}
#clockStyleEyeCircle1 {
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 10%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
/* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
background-color: black;
}
#clockStyleEyeCircle2 {
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 65%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
background-color: black;
}
#clockStyleSimileCircle {
position: absolute;
width: 8vw;
height: 3vw;
top: 68%;
left: 25%;
border: 3px solid rgb(36, 36, 36);
/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
border-bottom-left-radius: 100% 200%;
border-bottom-right-radius: 100% 200%;
background-color: black;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
}
#clockCenterDot {
position: absolute;
width: 4%;
height: 4%;
top: 48%;
left: 48%;
border-radius: 50%;
background-color: rgba(0, 0, 0);
box-shadow: 3px 3px 10px;
z-index: 4;
}
#hourNeedle {
position: absolute;
height: 30%;
width: 2%;
top: 20%;
left: 49%;
background-color: rgb(0, 0, 0);
border-radius: 5px 5px 0 0;
box-shadow: 3px 3px 10px;
z-index: 1;
}
#minuteNeedle {
position: absolute;
height: 38%;
width: 1.6%;
top: 12%;
left: 49.2%;
background-color: rgba(0, 0, 0);
border-radius: 5px 5px 0 0;
box-shadow: 3px 3px 10px;
z-index: 2;
}
#secondNeedle {
position: absolute;
height: 46%;
width: 1%;
top: 8%;
left: 49.5%;
background-color: rgba(0, 0, 0);
border-radius: 5px 5px 0 0;
box-shadow: 3px 3px 10px;
z-index: 3;
}
<div id="clockOuterCircle">
<div id="clockInnerCircle">
<div id="clockStyleCircle">
</div>
<div id="clockCenterDot"></div>
</div>
</div>
body{
background:#fff;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #fff;
box-shadow: 0px 0 5px 0 rgba(0, 0, 0, 0.4);
border-radius:5px;
}
.triangle::after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top: 0;
right: 1%;
box-sizing: border-box;
border: 0.75em solid black;
border-color: transparent transparent ;
transform-origin: 0 0;
transform: rotate(135deg);
box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
}
<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>
Can you please replace ".triangle::after" with this code and check whether it solves you problem or not?
.triangle::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top: 0;
right: 1%;
box-sizing: border-box;
border: 0.75em solid black;
border-color: transparent transparent;
transform-origin: 0 0;
transform: rotate(135deg);
background: #fff;
box-shadow: -2px 2px 2px 1px rgb(233, 233, 233);
}
Just add z-index: -1; to the pseudo element to move it behind the main element:
body{
background:#fff;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #fff;
box-shadow: 0px 0 5px 0 rgba(0, 0, 0, 0.4);
border-radius:5px;
}
.triangle::after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top: 0;
right: 1%;
box-sizing: border-box;
border: 0.75em solid black;
border-color: transparent transparent ;
transform-origin: 0 0;
transform: rotate(135deg);
box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
z-index: -1;
}
<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>
It may be help and also looks good
body{
background:#fff;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #fff;
box-shadow: 0px 0 5px 0 rgba(0, 0, 0, 0.4);
border-radius:5px;
}
.triangle::after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top: 17px;
right: 1%;
box-sizing: border-box;
border: 0.75em solid;
border-color: #fff;
transform-origin: 0 0;
transform: rotate(-133deg);
box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}
<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>
Same method use here.
Z-index: -1 is safe bro
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
In the above code I want to insert the blue arrow to the middle right of the .wrapper-dropdown-3. As of now it is situated on the top right near the Transport span. I am not sure how I can move it to the very right middle? Any suggestions?
You can use absolute positioning against container:
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
position: relative;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
position: absolute;
right: 5px;
top: calc(50% + 6px / 2); /* 6px here is border-width value to compensate a fact that arrow is made from border */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
Simply use positionning like this :
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
/*Code added*/
position:relative;
/**/
}
.wrapper-dropdown-3:after {
/*Code added*/
position:absolute;
right:5px;
top:50%;
/**/
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
This is what I want to achieve:
I'm looking to "cut" the lower left corner of the content in the code below
(similar to if you had folded the corner of a page down)
I'd like to know if there is any adjustments I could do to the CSS below to achieve this.
.model-properties {
padding: 0.8em 3em;
position: absolute;
top: 0px;
right: 0px;
width: 20%;
min-width: 15%;
z-index: 2;
display: none;
color: #c6d2db;
font-size: 13px;
background: linear-gradient(180deg, #182229, #182229, #293741, #293741);
max-height: 700px;
overflow: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div id="model-properties-container" class="model-properties">
.model-properties:before,
.model-properties:after
{
bottom: 0;
left: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.model-properties:after {
border-color: #88b7d5;
border-left-color: white;
border-bottom-color: white;
border-width: 30px;
}
https://jsfiddle.net/e46xvp3x/3/
I am trying to create right arrow with gray border with css. but I think the arrow is over lapping the left rectangle. some finishing touch is required here:
.arrow_box {
position: relative;
background: #fff;
border: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
}
.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(255, 255, 255, 0);
border-left-color: #fff;
border-width: 17px;
margin-top: -17px;
}
.arrow_box:before {
border-color: rgba(170, 170, 170, 0);
border-left-color: #aaa;
border-width: 19px;
margin-top: -19px;
}
<div class="arrow_box">Consumer Customer
</div>
You can add border on specific sides except right:
.arrow_box {
position: relative;
background: #fff;
border-left: 2px solid #aaa;
border-top: 2px solid #aaa;
border-bottom: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
box-sizing: border-box;
}
https://jsfiddle.net/2ca4aucm/1/