This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 11 months ago.
I'm trying to make this shape in HTML/CSS, and I can't do it for the life of me. If anyone can give a heads-up, it would be much appreciated. Including JS also doesn't matter. If you can give the smallest nudge in the right direction, I would be grateful. Thanks, here's the drawing.
Please check this code
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
<div class="shape">
<h2>Talk Bubble</h2>
<div id="talkbubble"></div>
</div>
Related
This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
Closed 1 year ago.
Trying to replicate this design using css. The quotes are pngs. But can only find help for solid rectangles and more of a page corner folded to save a spot.Design I'm trying to replicate with Css
I gave them different colors so you could visualize what's happening easily.
.myDiv {
margin-top: 30px;
position: relative;
width: 50px;
height: 50px;
background-color: transparent;
border: 10px solid red;
border-radius: 0 0 15px 15px;
border-top: none;
}
.myDiv::before {
content: '';
position: absolute;
height: 20px;
width: 40px;
background-color: orange;
top:-10px;
left:20px;
border-radius: 0 10px 0 0;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Im looking to replicate something like this but as a relatively new guy to CSS, I cannot for the life of me figure out the appropriate CSS to create this shape around the text.
image example
Really appreciate any help you can give. Thanks in advance!
There are multiple ways to do this. But you can split it in 2 separate shapes.
Rectangular shape ( background of the text ) and a triangle using a pseudo element.
See below
Tweak around with the border values of the after element to achieve exactly the shape you want.
span {
position:relative;
color: white;
background: blue;
padding: 10px 0 10px 10px;
margin-top: 10px;
display: inline-block;
}
span:after {
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 20px solid blue;
position: absolute;
right: 0;
transform: translateX(100%);
content: '';
top: 0;
}
<span>
My Text
</span>
There you go
Note that you can play around with the border-left value in #snippet:after to increase or reduce the "arrow section"
#snippet {
width: 200px;
height: 150px;
background-color: red;
position: relative;
}
#snippet:after {
content: '';
position: absolute;
top: 0px;
left: 200px;
border: 75px solid transparent;
border-left: 30px solid red;
}
<div id="snippet">Hello</div>
This question already has answers here:
CSS Only Pie Chart - How to add spacing/padding between slices?
(2 answers)
HTML5 / CSS3 Circle with Partial Border
(8 answers)
Closed 2 years ago.
I'm trying to create this image: https://i.stack.imgur.com/7k4Uq.png
I'm not sure what the best way to do this is. I got the CSS to work, but I don't know if there is a "better way" of doing it, or a cleaner/easier method. My CSS is below:
:root{
--size-red: 70px;
--size-grey: 43px;
}
.arc {
width: 0;
height: 0;
position: relative;
border-left: var(--size-red) solid transparent;
border-right: var(--size-red) solid transparent;
border-top: 100px solid red;
border-radius: 51%;
}
.arc:after {
content:'';
width: 0;
height: 0;
position: relative;
right: var(--size-grey);
border-left: var(--size-grey) solid transparent;
border-right: var(--size-grey) solid transparent;
border-top: 60px solid white;
border-radius: 51%;
}
Any suggestions for how to make my code look cleaner/more manageable would be appreciative. Thanks!
I came across this trick when I wanted to feature some headline text. I love the look of it as was wondering if there was a way to have the ends point up.
.pagebreaker {
padding: 10px;
margin-bottom: -5px;
border-top: 4px solid #f6d241;
border-radius: 35px;
}
ref Image:
I've tried negative border-radius and negative padding. Is there something I am missing here? Or is this something that can't be done?
Thanks.
Use border-bottom
.pagebreaker {
padding: 10px;
margin-bottom: -5px;
border-bottom: 4px solid #f6d241;
border-radius: 35px;
width: 300px;
height: 10px;
}
<div class="pagebreaker"></div>
Is it possible to somehow create the following in CSS? (See attached image)
What i want to achieve is to be able to change the background-color of the bubble with CSS.
One solution would be to save the background bubble in a bunch of different colors and depending on the color chosen display the correct background image. However this would not be as dynamic as i wish.
Any ideas here?
Something like this was done over at CSS Tricks using pseudo-elements. The only limitation I can think of or foresee is the border that goes around the object... CSS Round-out borders
Using the :after and :before pseudo elements I was able to take the same concept and apply it to create your shape. Again... The only catch is the border. Also... it requires the background behind it to be solid, so that you can mimic the background color... No patterns or transparency here. Try changing the colors of the :after and :before elements and you'll see how its done.
JSFiddle Example
<div class="bubble">
<span>Some Text</span>
</div>
body { background: #999;}
.bubble {
position: relative;
width: 150px;
height: 60px;
border-radius: 10px 10px 0 10px;
border: 1px solid #fff;
background: #444;
}
.bubble:before {
content: " ";
position: absolute;
width: 30px;
height: 30px;
bottom: 0;
right: -30px;
background: #444;
}
.bubble:after {
content: " ";
position: absolute;
width: 60px;
height: 60px;
bottom: 0;
right: -60px;
background: #999;
border-radius: 100%;
}
The other options are nice css approaches but with the border on a shape like that will not be possible with just css.
In my approach I am going to use an svg image.
This is a path in the image and as you can see classes and ids are possible to use on an svg image.
<path class="bubBg" fill="#7C7C7C"
Here is a JSFIDDLE you can play around with.
(currently I believe this is the best option to have that exact design but Michael's answer is pretty good)
Here's what I did: Not exactly the same bubble but similiar, Check it out
Fiddle: http://jsfiddle.net/zD3bV/1/
CSS
#speech-bubble {
width: 120px;
height: 80px;
background: purple;
top: 2px;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid purple;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}
#talk-bubble {
width:120px;
height:80px;
background:blue;
position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#talk-bubble:before {
content:"";
position:absolute;
right:100%;
top:26px;
width:0;
height:0;
border-top:13px solid transparent;
border-right:26px solid blue;
border-bottom:13px solid transparent;
}
Also, search for css shapes you'll more likely to get the best results and then you can modify them according to your needs