As I'm not expert in CSS, requesting help everyone. am trying to create speech bubble like below. but i could only able to get oval shape. I don't know how add tail on top right corner.
I've gone through all SO solution but don't know which CSS property need to change to make top right tail as per below image.
html
<div class="bubble-wrapper">
<div class="flat-oval"></div>
</div>
CSS
.flat-oval {
border: 1px solid green;
width: 160px;
height: 80px;
background-color: green;
border-radius: 50%;
position: relative;
left: 0%
}
.bubble-wrapper{
border: 1px solid red;
text-align: center;
}
that tail should be bit long and lean.
Thanks to all
do it like below:
.speech {
width: 200px;
height: 100px;
border-radius: 100%;
background: red;
margin: 50px;
position: relative;
filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000)
}
.speech:before {
content: "";
position: absolute;
top: -15%;
left: -10%;
border-radius: 100px 100px 0 0;
width: 60px;
height: 30px;
box-shadow: 20px 0 0 red;
}
<div class="speech"></div>
Well, you can use clip-path property in case of creating that tail thing. Using clip-path you can create any kind of shape you want. Here is some link that might help to learn more about clip-path.
similar kind of project: https://freefrontend.com/css-speech-bubbles/
clip-path documentary: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
I hope Its useful to you..
.bubble-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-70%, -50%);
width: 80vmin;
height: 80vmin;
}
.bubble-wrapper div {
position: absolute;
box-sizing: border-box;
}
.b {
border: 0.5vmin solid black;
}
.r {
border-radius: 100%;
}
.hb::before,
.ha::after {
content: "";
display: block;
position: absolute;
}
.bubble {
width: 40%;
height: 25%;
left: 73%;
top: 10%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 5vmin;
background: #ffd;
box-shadow: 0 -0.25vmin, 0 0.125vmin;
font-family: "Comic Sans", "Comic Neue", sans-serif;
}
.bubble::before {
width: 40%;
height: 250px;
bottom: -10px;
border-radius: 50%;
left: -60px;
box-shadow: 0.5vmin 0, 3vmin -1vmin #ffd, 3vmin -1vmin 0 0.5vmin;
clip-path: polygon(0% 49%, 150% 51%, 150% 100%, 0% 100%);
transform: rotateZ(-210deg) scaleX(-1);
}
<div class="bubble-wrapper">
<div class="bubble b r hb">Hello....</div>
</div>
Related
As you can see in the image below, I am trying to warp or triangle my div from bottom and top, but I have no idea how to do it. I just tried a couple of times to do it, but I couldn't achieve the result. So how can I make it using after,before psuedo? It doesn't matter make with psuedo, but I wonder that how to do it?
Here is my code:
body{
background:lightblue;;
}
.block{
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
}
<div class="block"></div>
An idea using transformation and perspective where you will have the border, border-radius also the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can also add the shadow and easily change the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
filter:drop-shadow(0 0 5px #000);
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(35deg, blue, red);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can do it with clip-path. There is a really simple tool that could help you: https://bennettfeely.com/clippy/.
I've made an example for you with your content:
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
-webkit-clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
}
<div class="block"></div>
This can be done using CSS triangles on the ::before and ::after pseudo-elements! I've colored them brightly so you can tell what's happening, but it should be somewhat easy to get these to look they way you want.
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
position: relative;
}
.block::before,
.block::after{
display: block;
content: '';
position: absolute;
border: 150px solid transparent;
}
.block::before {
border-top-width: 0;
border-bottom-width: 25px;
border-bottom-color: red;
top: -25px;
}
.block::after {
border-bottom-width: 0;
border-top-width: 25px;
border-top-color: green;
bottom: -25px;
}
<div class="block"></div>
Adjust the measurements to fit your exact shape requirements. This gives something close to what you are looking for.
body{
background:lightblue;;
}
.block{ position:
relative; width:200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);:
}
}
.block:before
{ content: '';
position: absolute;
top: 20%;
bottom: 20%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
<div class="block"></div>
I'm trying to recreate the following image in CSS:
I've already started making the box and arrow (see below) and now my only problem is to make the left edge of the arrow round with CSS only just like in the image.
Any idea? Thanks.
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 0;
height: 0;
border-style: inset;
border-width: 0 32px 20px 0;
border-color: transparent #ff0d1e transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
<span class="speech-bubble"></span>
You could do something like this using transform: skew(); and border-radius. I added z-index: -1 to the pseudo-element so it sits behind the <span> (I'm assuming you will put text inside).
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 70px;
height: 30px;
background-color: #ff0d1e;
transform: skew(55deg);
transform-origin: top right;
border-radius: 15% 0 0 0 / 25%;
z-index: -1;
}
<span class="speech-bubble"></span>
It's still slightly pointed, but if you used corner-specific border-radius properties you can get a similar effect.
Here I used border-top-left-radius and border-bottom-left-radius.
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 0;
height: 0;
border-style: inset;
border-width: 0 32px 20px 0;
border-color: transparent #ff0d1e transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
border-top-left-radius:80%;
border-bottom-left-radius:200%;
}
<span class="speech-bubble"></span>
Here is a shadow that I am trying to replicate using just CSS and I just cannot work out how to do it. I have spent hours trying. I think I need to create 2 shadow elements but I'm not sure how to proceed.
The closest thing I get is with this (an abysmal attempt - I know):
.type-product:before, .type-product:after{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 21px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.type-product:after{
transform: rotate(8deg);
right: 20px;
left: auto;
}
Most appreciative if any CSS gurus could provide any help.
NOTE: I don't think that this link covers my problem fully. It just discusses the curve - whilst I need a curve with a color-gradient...
To me that looks like something that can be achieved using a couple of elements like shown below. The shadow is actually a linear-gradient on top of which a white circle is placed. The drawback of this approach is that it would work only with a solid background (because the circle that is overlayed would need a solid color).
That just doesn't look like it could be possible using a box-shadow because the shadow itself seems like a gradient which goes from transparent or white on the left to black in the middle to transparent or white again on the right.
The output is responsive and can adapt itself to all dimensions of the parent container. Just :hover the container in the snippet to see it in action :)
.wrapper {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.content {
height: 85%;
width: 100%;
border: 1px solid;
}
.wrapper:before {
position: absolute;
content: '';
bottom: 0px;
left: 0px;
height: 15%;
width: 100%;
background: linear-gradient(to right, transparent 2%, #444, transparent 98%);
}
.wrapper:after {
position: absolute;
content: '';
bottom: -186%;
/* height of before - height of after - 1% buffer for the small gap */
left: -50%;
height: 200%;
width: 200%;
border-radius: 50%;
background: white;
}
* {
box-sizing: border-box;
}
/* just for demo */
.wrapper {
transition: all 1s;
}
.wrapper:hover {
height: 300px;
width: 400px;
}
<div class='wrapper'>
<div class='content'></div>
</div>
You can do this with :before pseudo element and box-shadow
div {
width: 200px;
height: 100px;
border: 1px solid #aaa;
position: relative;
background: white;
}
div:before {
content: '';
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
left: 0;
transform: translateY(103%);
box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999;
}
<div></div>
Aside from the answers, this could also be a good box shadow for your class as well. (This is just preference & similar to what you want).
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.type-product {
position: relative;
}
.type-product:before {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
left: 10px;
width: 50%;
top: 70%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(-8deg);
}
.type-product:after {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
right: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(8deg);
}
<div class="type-product box">
</div>
Hope you like it.
Consider the following -
#banner {
width: 100%;
height: 50px;
box-shadow: 0 0 10px #000000;
background: #63B0F2;
}
#circle {
position: relative;
top: 20px;
height: 80px;
width: 80px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 10px #000000;
background-color: white;
}
<div id="banner">
<div id="circle">
</div>
</div>
Is it possible to remove/clip the drop-shadow cast by the top half of the white square onto the blue div?
To put it another way, so there is only shadow cast onto the background, but not each other?
Possible solution with pseudo-elements :before and :after. Just add to your CSS:
#circle:before{
position: absolute;
content: "";
width: 150%;
height: 50%;
left: -25%;
top: -10px;
background: #63B0F2;
}
#circle:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
border-radius: 50%;
}
DEMO
Add a second element for the shadow and position it behind the banner using z-index.
.shadow,
.circle {
display: block;
height: 120px;
width: 120px;
position: absolute;
bottom: -100%;
left: calc(50% - 62px);
border-radius: 50%;
}
.shadow {
box-shadow: 0 0 1em -.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10, 10, 10, .2);
border: 2px solid transparent;
z-index: -1;
}
.circle {
background: #e0e0e0;
border: 2px solid white;
}
See this codepen, in which I have used ridiculous colors to illustrate my point: https://codepen.io/pen/?editors=0100
What would be your best option or method to create a shape as seen in the attachment link full CSS and is that possible anyway??
I did research and testing with CSS parallelogram e.g. but not with any good succes yet.
See the shape here -->> http://tinypic.com/r/352ge3b/6
I had this thing that it could be done with just one element - and it can be done, I just don't think it's exactly the best solution to do it like this.
DEMO
HTML:
<div class='speech-bubble'>Hello!</div>
CSS:
.speech-bubble {
position: relative;
margin: .5em auto;
padding: 1em;
width: 10em; height: 4em;
border-radius: .25em;
transform: rotate(-4deg) rotateY(15deg);
background: #629bdd;
font: 2em/4 Century Gothic, Verdana, sans-serif;
text-align: center;
}
.speech-bubble:before, .speech-bubble:after {
position: absolute;
z-index: -1;
content: '';
}
.speech-bubble:after {
top: 0; right: 0; bottom: 0; left: 0;
border-radius: inherit;
transform: rotate(2deg) translate(.35em, -.15em) scale(1.02);
background: #f4fbfe;
}
.speech-bubble:before {
border: solid 0 transparent;
border-right: solid 3.5em #f4fbfe;
border-bottom: solid .25em #629bdd;
bottom: .25em; left: 1.25em;
width: 0; height: 1em;
transform: rotate(45deg) skewX(75deg);
}
Not exactly, what you're looking for, but I was playing around with CSS3's perspective and rotate and made this:
body {
color: #FFF;
font-family: sans-serif;
}
.outer {
position: relative;
height: 120px;
width: 120px;
margin: 50px;
padding:10px;
perspective:150;
-webkit-perspective:150;
}
.inner {
border-radius: 15px;
padding:50px;
position: absolute;
background-color: #80BFFF;
transform: rotateY(10deg);
-webkit-transform: rotateY(10deg);
box-shadow: -4px -4px 0px #3399FF;
}
.inner:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 20px;
top: 115px;
border: 15px solid;
border-color: #80BFFF transparent transparent #80BFFF;
}
That's my HTML stuff
<div class="outer">
<div class="inner">Yay!</div>
</div>